Mousewheel Scrollen innerhalb Container - Ereignisse fangen

Question

Ich habe eine Seite mit inner Scrollbare DIV. Während ich den Mauszeiger darüber bewege und versuche, mit dem Mausrad zu scrollen, wird der Inhalt des DIV nach Belieben gescrollt, während die Hauptseite unverändert bleibt. Aber wenn ich den unteren Teil des Scrollbereichs des DIV erreiche, beginnt die ganze Seite stattdessen zu scrollen.

Ich habe versucht, Ereignishandler auf diesem div zu setzen, aber preventDefault() Methode verhindert auch Scrollen des DIV selbst.

Hier kommt den falschen Code:

$('.folderlist').on('DOMMouseScroll mousewheel', function(ev){ 
    ev.stopPropagation(); 
    ev.preventDefault(); 
}) 

prevent() verhindert Seite blättern, aber nicht zulässt, auch das Scrollen des DIV.

stopPropagation() tut nichts in diesem Fall nehme ich an

Habe ich etwas verpasst? ..

Answer 1

andBeyond Arbeit kam mit einer netten Lösung, obwohl es Probleme mit IE hatte, also habe ich versucht, sie zu beheben, und hier gehst du:

function stopEvent(e) { 
    e = e ? e : window.event; 
    if (e.stopPropagation) e.stopPropagation(); 
    if (e.preventDefault) e.preventDefault(); 
    e.cancelBubble = true; 
    e.cancel = true; 
    e.returnValue = false; 
    return false; 
} 

$.fn.extend({ 
    // param: (boolean) onlyWhenScrollbarVisible 
    // If set to true, target container will not intercept mouse wheel 
    //  event if it doesn't have its own scrollbar, i.e. if there is too 
    //  few content in it. I prefer to use it, because if user don't see 
    //  any scrollable content on a page, he don't expect mouse wheel to 
    //  stop working somewhere. 

    scrollStop: function(onlyWhenScrollbarVisible) { 
     return this.each(function(){ 
      $(this).on('mousewheel DOMMouseScroll', function(e) { 
       if (onlyWhenScrollbarVisible && this.scrollHeight <= this.offsetHeight) 
        return; 

       e = e.originalEvent; 
       var delta = (e.wheelDelta) ? -e.wheelDelta : e.detail; 
       var isIE = Math.abs(delta) >= 120; 
       var scrollPending = isIE ? delta/2 : 0; 
       if (delta < 0 && (this.scrollTop + scrollPending) <= 0) { 
        this.scrollTop = 0; 
        stopEvent(e); 
       } 
       else if (delta > 0 && (this.scrollTop + scrollPending >= (this.scrollHeight - this.offsetHeight))) { 
        this.scrollTop = this.scrollHeight - this.offsetHeight; 
        stopEvent(e); 
       } 
      }); 
     }); 
    } 
}); 

Jetzt macht es genau das, was ich wollte. Dank andBeyond für Ihre große Blog-Post - http://www.andbeyonddesign.com/Blog/2012/02/Setting-scroll-only-for-scrollable-div

Beispiel Nutzung: $('.folderlist').scrollStop(true);

Answer 2

$('.folderlist').hover(function(){ 
    $('body').css('overflow','hidden'); 
}, function(){ 
    $('body').css('overflow','auto'); 
}) 

versuchen, dass .. erraten sollte es