Question

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

为此，我设置了以下css：

body{
    overflow:hidden;
}

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

在下面的小提琴中，我被困在“Div3”：Fiddle

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

修改

我无法将overflow-y: scroll;用于我的“Div3”，因为它涵盖了我的网页的全宽。添加它会移动我不想要的“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是否是当前在视口中的唯一一个并且整个视口被它占用，那么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');
    }
});

这并不完美，但应该充分证明这个想法。

更新了小提琴here。

Answer 2

我知道这是一个丑陋的解决方案：

$(window).scroll(function() {
    $('#message').text("Current scroll position: " + $(this).scrollTop());//added to see the scroll position
     var pixels_to_top = $(this).scrollTop();
        var your_value_min = 810;
            var your_value_max = 857;
        if (pixels_to_top > your_value_min && pixels_to_top<your_value_max){
             $("body").css("overflow","auto");
           }
    else{
     $("body").css("overflow","hidden");
    }
});

http://jsfiddle.net/Loy6z2kt/18/

您必须根据需要调整最小值和最大值。

Answer 3

正如您在下面的评论中提到的那样：OP：您希望得到的对所提到的网站http://www.fontwalk.de/03/的影响 - 以防您不知道 - 被称为视差滚动;只需查看此处的一些示例：Parallax examples。如果那是你想要的，我想你想查看说明书，例如这里给出：Parallax scrolling tutorial。至少作为一个起点，因为第二个教程提供了高级视差＆＃34;不是免费的。
本教程以及许多网站使用的滚动条是免费的skrollr.js。

如果您在问题中更新之后不应该像以前使用overflow-y: scroll那样更新。

使网页的特定部分可滚动

3 个答案: