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

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

4 голосов
/ 02 апреля 2012

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

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

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

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

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

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

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

Ответы [ 2 ]

3 голосов
/ 03 апреля 2012

и далее придумали хорошее решение, хотя у него были проблемы с 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);
                }
            });
        });
    }
});

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

Пример использования: $('.folderlist').scrollStop(true);

0 голосов
/ 02 апреля 2012 
$('.folderlist').hover(function (){
    $('body').css('overflow','hidden');
}, function (){
    $('body').css('overflow','auto');
})

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

...