javascript - 使网页的特定部分可滚动

Question

我有一个特定的页面，只需通过点击 即可完成导航。

为此，我设置了以下 css:

body{
    overflow:hidden;
}

现在，要导航到我页面的特定部分，链接 必须可见，否则我会被困在那个位置。这要求我的页面的某个部分应该是“可滚动的”。

在下面的 fiddle 中，我卡在了“Div3”:Fiddle

如何在显示“Div3”时使我的页面“可滚动”，否则不能滚动。

编辑:

我不能为我的“Div3”使用overflow-y: scroll;，因为它覆盖了我页面的全宽。添加它会改变我不想要的“Div3”的内容。

Answer 1

只需在其内容周围添加一个额外的容器即可使#div3 可滚动，如下所示:

<div id="div3">
    <div class="content">
        <h3>Div 3</h3>
        <a href="#div4">Next</a>
        <a href="#div2">Prev</a>
    </div>
</div>

然后修改您的 CSS 以强制该容器滚动:

#div3 {
    overflow-y: scroll;
}

updated fiddle显示了这在实践中是如何工作的。

编辑

如果您真正想要的是查看#div3 是否是当前视口(viewport)中的唯一一个并且整个视口(viewport)都被它占据，则 JS(使用 jQuery)将如下所示:

var $div3 = $('#div3'),
    div3Top = Math.round($div3.offset().top),
    div3Bottom = $div3.height() + div3Top,
    $window = $(window),
    $body = $('body');

$(window).on('scroll', function() {

    console.log($window.scrollTop());
    console.log(div3Top);    
    console.log(div3Bottom);

    if (($window.scrollTop() >= div3Top) && ($window.scrollTop() + $window.height()) < div3Bottom + 5) {
        $body.css('overflow', 'scroll');
    } else {
        $body.css('overflow', 'hidden');
    }
});

这并不完美，但应该足够好地展示了这个想法。

更新 fiddle here .