Прокрутка мыши в контейнере - события ловли

Question

У меня есть страница с внутренним прокручиваемым DIV. Когда я наводил на него курсор и прокручивал его с помощью колеса мыши, содержимое этого DIV прокручивается по желанию, пока главная страница остается на месте. Но когда я добираюсь до нижней части области прокрутки DIV, вместо нее начинается прокрутка всей страницы.

Я попытался установить обработчики событий на этом div, но метод preventDefault() также предотвращает прокрутку самого DIV.

Здесь приходит неправильный код:

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

preventDefault() предотвращает прокрутки страниц, но и запрещает прокруткой DIV.

stopPropagation() ничего не делает в этом случае, я полагаю,

ли я что-то пропустил? ..

Answer 1

andbeyond придумал с хорошим решением, хотя у него были проблемы с IE, поэтому я попытался их исправить, и вот вы:

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

Теперь он делает именно то, что я хотел. Благодаря andbeyond за большой блоге - использование http://www.andbeyonddesign.com/Blog/2012/02/Setting-scroll-only-for-scrollable-div

Пример: $('.folderlist').scrollStop(true);

Answer 2

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

попробовать что .. думаю, он должен работать