我有一个带有内部可滚动 DIV 的页面。当我将鼠标悬停在它上面并尝试用鼠标滚轮滚动它时,该 DIV 的内容会根据需要滚动,而主页保持不变。但是当我到达 DIV 滚动区域的底部时,整个页面开始滚动。
我尝试在该 div 上设置事件处理程序,但是preventDefault()
方法还可以防止 DIV 本身滚动。
这里出现了错误的代码:
$('.folderlist').on('DOMMouseScroll mousewheel', function(ev){
ev.stopPropagation();
ev.preventDefault();
})
preventDefault()
防止页面滚动,但也不允许 DIV 滚动。
stopPropagation()
我想在这种情况下什么也不做
我错过了什么?..
超越想出了一个很好的解决方案,尽管它在 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 http://www.andbeyonddesign.com/Blog/2012/02/Setting-scroll-only-for-scrollable-div
用法示例:$('.folderlist').scrollStop(true);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)