Div на прокрутку div при достижении донизу или сверху

Question

У меня есть 2 DIVS, один внутри другого. оба прокручиваются.

Когда я просматриваю «внутренний 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 для захвата события прокрутки и предотвращения его работы над определенным элементом, или вы можете структурировать свою страницу для учета этого.

Один из вариантов может заключаться в том, чтобы ограничить высоту body, а затем скрыть переполнение.

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

Как это: https://jsfiddle.net/s4yzpwk9/6/