我添加此答案是出于完整性考虑，因为@amustill接受的答案不能正确解决Internet Explorer中的问题。此外，此解决方案不需要任何插件-仅需要jQuery。
本质上，代码通过处理
mousewheel事件来工作。每个此类事件都包含一个
wheelDelta等于要将px可滚动区域移动到的事件的数量。如果该值为>0，则我们正在滚动up。如果wheelDelta是，<0那么我们正在滚动down。
FireFox：FireFox
DOMMouseScroll用作事件，并填充
originalEvent.detail，其+/-内容与上述内容相反。通常返回间隔为3，而其他浏览器返回间隔为120（至少在我的机器上）滚动。要更正，我们只需检测它并乘以-40归一化即可。
如果a
<div>的可滚动区域已经位于顶部或底部最大位置，则@amustill的答案通过取消事件来起作用。但是，如果
Internet Explorerdelta大于剩余的可滚动空间，则
Internet Explorer将忽略取消的事件。
换句话说，如果你有一个
200px高大
<div>含有500px的滚动内容，而目前scrollTop是400中，mousewheel它告诉浏览器事件滚动120px进一步将导致双方
<div>和
<body>滚动，因为
400+ 120> 500。
所以-要解决该问题，我们必须做一些稍微不同的事情，如下所示：
必需的jQuery代码是：
$(document).on('DOMMouseScroll mousewheel', '.Scrollable', function(ev) { var $this = $(this), scrollTop = this.scrollTop, scrollHeight = this.scrollHeight, height = $this.innerHeight(), delta = (ev.type == 'DOMMouseScroll' ? ev.originalEvent.detail * -40 : ev.originalEvent.wheelDelta), up = delta > 0; var prevent = function() { ev.stopPropagation(); ev.preventDefault(); ev.returnValue = false; return false; } if (!up && -delta > scrollHeight - height - scrollTop) { // Scrolling down, but this will take us past the bottom. $this.scrollTop(scrollHeight); return prevent(); } else if (up && delta > scrollTop) { // Scrolling up, but this will take us past the top. $this.scrollTop(0); return prevent(); }});本质上，该代码可以取消任何滚动事件这将创建不希望的边缘条件，则用了
jQuery设置
scrollTop的
<div>到最大值或最小值，这取决于哪个方向
mousewheel事件请求。
由于事件在两种情况下都被完全取消，因此它根本不会传播到body任何地方，因此可以解决IE以及所有其他浏览器中的问题。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）