div divをスクロールして下端または上端まで移動

Question

2つのDIVSがあります。 は両方ともスクロール可能です。

"inside div"（アタッチされたファイルの緑色の部分）をスクロールして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

私は例を作っている、あなたは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 2

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 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を使用してスクロールイベントをキャプチャし、特定の要素で作業しないようにすることも、JSを考慮してページを構造化することもできます。

1つのオプションは、bodyの高さを制限し、オーバーフローを隠すことです。このよう

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

：https://jsfiddle.net/s4yzpwk9/6/