鼠标滚轮在容器内滚动 – 捕捉事件

我有一个内部可滚动DIV的页面。 当我将鼠标hover在它上面并尝试使用鼠标滚轮滚动它时，在主页保持放置时，该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, ie 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);

Answer 2

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

试试..猜它应该工作