Div auf div Scrolling während nach unten oder oben zu erreichen

Question

Ich habe 2 DIVS, eine in der anderen. beide sind scrollbar.

Wenn ich das "inside div" scrolle (das grüne in der Attached-Datei) und bis zum unteren Ende des DIVs fange, scrolle ich den DIV darunter. Wie kann ich das darunterliegende DIV deaktivieren, nur wenn ich den oberen DIV scrolle?

<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

Ich habe ein Beispiel gemacht, müssen Sie jquery hinzugefügt in der Seite haben:

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

Können Sie Javascript (und jQuery)?

Wenn ja, dann ist hier eine Lösung:

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 
       }); 

original post Siehe hier: With jQuery, how can I prevent the page from scroll when reaching the bottom of a scrollable div?

Answer 3

diese Funktion versuchen hoffen, dass es Ihnen

$('.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

Diese helfen ist das Richtige Verhalten, da Ihre Seite tiefer ist als das Ansichtsfenster. Sie können JS verwenden, um das Bildlaufereignis zu erfassen und zu verhindern, dass es an einem bestimmten Element arbeitet, oder Sie können Ihre Seite so strukturieren, dass sie dies berücksichtigt.

Eine Option kann sein, die Höhe des body zu beschränken und dann den Überlauf auszublenden.

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

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