Question

我有2个DIVS，一个在另一个里面。两者都是可滚动的。

当我滚动“inside div”（绿色的那个，在attatched文件中），并且到达DIV的底部时，它开始滚动下面的DIV。如果我滚动顶部DIV，我怎么能禁用下面的DIV滚动？

<div class="container">

<div class="neneathDiv">
  blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>

  <div class="topDiv">
  blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>blah blah <br>
</div>

</div>

   .container{background-color: blue; }
.topDiv{background-color: green; width: 300px; position: absolute; top: 0; 
          right:0; height: 100%; z-index: 99; overflow: auto;}
.neneathDiv{background-color: red; height: 100px;  height: 100%; overflow: auto;}

Here's a Demo of my problem

Answer 1

你能使用javascript（和jQuery）吗？

如果是，这是一个解决方案：

See this fiddle

$(".topDiv").bind( 'mousewheel DOMMouseScroll', function ( e ) {
                    //Get the original Event
                    var e0 = e.originalEvent,
                    //Hold the movement of the scroll 
                    delta = e0.wheelDelta ;
                    //If it's negative add -30 for each step or 30 if is positive
                    this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
                    //Apply the scroll only for the element with the 
                    //handler      
                    e.preventDefault();
                    //Prevent the normal event
                });

在此处查看原帖： With jQuery, how can I prevent the page from scroll when reaching the bottom of a scrollable div?

Answer 2

我做了一个例子，你需要在页面中添加jquery：

jQuery(function($) {
    $('.topDiv').on('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            $('body').addClass("hide");
        } else {
            $('body').removeClass("hide");
        }
    });
});

https://jsfiddle.net/s4yzpwk9/8/

Answer 3

试试这个功能希望它能帮到你

$( '.topDiv' ).bind( 'mousewheel DOMMouseScroll', function ( e ) {
var e0 = e.originalEvent,
    delta = e0.wheelDelta || -e0.detail;

this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
e.preventDefault();
 });

Answer 4

这是正确的行为，因为您的网页比视口更深。您可以使用JS捕获滚动事件并阻止它处理特定元素，或者您可以构建页面以解决此问题。

一个选项可能是限制body的高度，然后隐藏溢出。

body, html, .container {padding:0; margin:0; height:100%; max-height:100%;}
.container {overflow: hidden;}

像这样：https://jsfiddle.net/s4yzpwk9/6/

在div到达底部或顶部时滚动div

4 个答案: