I am adding this answer for completeness because the accepted answer by @amustill does not correctly solve the problem in Internet Explorer .
(我添加此答案是出于完整性考虑，因为@amustill接受的答案不能正确解决Internet Explorer中的问题 。)
Please see the comments in my original post for details.(请查看我的原始帖子中的评论以获取详细信息。)
In addition, this solution does not require any plugins - only jQuery.(此外，此解决方案不需要任何插件-仅需要jQuery。)
In essence, the code works by handling the mousewheel event.
(本质上，该代码通过处理mousewheel事件来工作。)
Each such event contains a wheelDelta equal to the number of px which it is going to move the scrollable area to.(每个此类事件都包含一个wheelDelta ，它等于将滚动区域移动到的px数。)
If this value is >0 , then we are scrolling up .(如果该值>0 ，那么我们正在up滚动。)
If the wheelDelta is <0 then we are scrolling down .(如果wheelDelta <0则我们down滚动。)
FireFox : FireFox uses DOMMouseScroll as the event, and populates originalEvent.detail , whose +/- is reversed from what is described above.
(FireFox ：FireFox使用DOMMouseScroll作为事件，并填充originalEvent.detail ，其+/-与上述内容相反。)
It generally returns intervals of 3 , while other browsers return scrolling in intervals of 120 (at least on my machine).(通常返回3间隔，而其他浏览器则以120间隔返回滚动（至少在我的机器上）。)
To correct, we simply detect it and multiply by -40 to normalize.(要更正，我们只需检测它并乘以-40即可归一化。)
@amustill's answer works by canceling the event if the <div> 's scrollable area is already either at the top or the bottom maximum position.
(如果<div>的可滚动区域已位于顶部或底部最大位置，则@amustill的答案通过取消事件来起作用。)
However, Internet Explorer disregards the canceled event in situations where the delta is larger than the remaining scrollable space.(但是，在delta大于剩余可滚动空间的情况下， Internet Explorer会忽略取消的事件。)
In other words, if you have a 200px tall <div> containing 500px of scrollable content, and the current scrollTop is 400 , a mousewheel event which tells the browser to scroll 120px further will result in both the <div> and the <body> scrolling, because 400 + 120 > 500 .
(换句话说，如果有200px高<div>含500px的滚动内容，且当前scrollTop是400 ，一个mousewheel事件，告诉浏览器滚动120px进一步将导致两个<div>和<body>滚动，因为400 + 120 > 500 。)
So - to solve the problem, we have to do something slightly different, as shown below:
(所以-要解决该问题，我们必须做一些稍微不同的事情，如下所示：)
The requisite jQuery code is:
(必要的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();
}
});
In essence, this code cancels any scrolling event which would create the unwanted edge condition, then uses jQuery to set the scrollTop of the <div> to either the maximum or minimum value, depending on which direction the mousewheel event was requesting.
(从本质上讲，此代码取消了任何会产生不必要边缘条件的滚动事件，然后使用jQuery将<div>的scrollTop设置为最大值或最小值，具体取决于mousewheel事件所请求的方向。)
Because the event is canceled entirely in either case, it never propagates to the body at all, and therefore solves the issue in IE, as well as all of the other browsers.
(由于无论在哪种情况下事件都被完全取消，因此它根本不会传播到body ，因此可以解决IE以及所有其他浏览器中的问题。)
I have also put up a working example on jsFiddle .
(我还在jsFiddle上提出了一个工作示例 。)
