Question

这是我的div结构。

<div id="page_wrapper">
   <div id="inner1"></div>
   <div id="inner2"></div>
   <div id="inner3"></div>
   <div id="inner4"></div>
</div>

单击按钮时，如何阻止在$('#inner3')下方滚动？

我尝试了几件事。我用了style="display:none;。这可以防止滚动，但我总是需要它可见。我只是想阻止用户看到它。

我使用了style="visiblility:hidden;。当我这样做时，页面的底部区域是空白的。看起来很奇怪。

那么我有什么办法可以隐藏$('#inner4')吗？

Answer 1

你可以在内部4做绝对位置然后它不会在那里，但仍然在dom。

#inner4 {
   position: absolute;
   left: -9999999px;
}

Answer 2

我认为应该有更好的选择。但是这个jQuery函数完全符合你的要求：

$(function() {
    $(window).scroll(function() {
        var winTop = $(document).scrollTop();
        var elem = $('#inner3');
        var breakPoint = elem.offset().top - ( $(window).height() - elem.height() );
        if( winTop>breakPoint ) {
            $(window).scrollTop( breakPoint );
        }
    });
});

DEMO

Answer 3

请尝试

#inner4 {
overflow: hidden;
height: 0px;
padding: 0px;
min-height: 0px;
max-height: 0px;
}

防止在特定div下面滚动

3 个答案: