我已经审查并测试了防止主体在 div 内滚动的各种功能,并组合了一个应该有效的功能。
$('.scrollable').mouseenter(function() {
$('body').bind('mousewheel DOMMouseScroll', function() {
return false;
});
$(this).bind('mousewheel DOMMouseScroll', function() {
return true;
});
});
$('.scrollable').mouseleave(function() {
$('body').bind('mousewheel DOMMouseScroll', function() {
return true;
});
});
- 这将停止所有滚动,因为我希望在容器内仍然可以滚动
- 这也不会在鼠标离开时停用
有什么想法或更好的方法吗?
更新2:我的解决方案是基于完全禁用浏览器的本机滚动(当光标位于 DIV 内部时),然后使用 JavaScript 手动滚动 DIV(通过设置其.scrollTop
财产)。另一种更好的方法是仅选择性地禁用浏览器的滚动,以防止页面滚动,但不阻止 DIV 滚动。查看下面 Rudie 的答案,它演示了这个解决方案。
干得好:
$( '.scrollable' ).on( 'mousewheel DOMMouseScroll', function ( e ) {
var e0 = e.originalEvent,
delta = e0.wheelDelta || -e0.detail;
this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
e.preventDefault();
});
现场演示: https://jsbin.com/howojuq/edit?js,输出
因此,您手动设置滚动位置,然后阻止默认行为(即滚动 DIV 或整个网页)。
更新1:正如 Chris 在下面的评论中指出的,在较新版本的 jQuery 中,增量信息嵌套在.originalEvent
对象,即 jQuery 不再在其自定义事件对象中公开它,我们必须从本机事件对象中检索它。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)