鼠标滚轮在容器内滚动 - 捕捉事件 [英] Mousewheel scrolling inside container - catching events

问题描述

我有一个内部可滚动DIV的页面。当我将鼠标悬停在它上面并尝试用鼠标滚轮滚动它时，在主页保持放置时，该DIV的内容会根据需要滚动。但当我到达DIV滚动区域的底部时，整个页面开始滚动。

I have a page with inner scrollable DIV. As I hover a mouse over it and try to scroll it with mouse wheel, the contents of that DIV is scrolled as desired while the main page stays put. But when I reach the bottom of the DIV's scrolling area, whole page begin to scroll instead.

我试图在该div上设置事件处理程序，但是 preventDefault（）方法也阻止了DIV本身的滚动。

I've tried to set event handlers on that div, but preventDefault() method also prevents scrolling of the DIV itself.

错误的代码如下：

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

preventDefault （）阻止页面滚动，但也不允许滚动DIV。

preventDefault() prevents page scroll, but also disallows the scrolling of the DIV.

stopPropagation（）在这种情况下什么都不做，我想

stopPropagation() does nothing in this case, I suppose

我错过了什么吗？..

Did I miss something?..

推荐答案

andbeyond 想出了一个很好的解决方案，虽然它有IE的问题，所以我试图修复它们，在这里你去：

andbeyond came up with a nice solution, though it had issues with IE so I've tried to fix them and here you go:

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

Now it does exactly what I wanted. Thanks andbeyond for your great blog post - http://www.andbeyonddesign.com/Blog/2012/02/Setting-scroll-only-for-scrollable-div

用法示例： $（'。folderlist'）。scrollStop（true）;

这篇关于鼠标滚轮在容器内滚动 - 捕捉事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！