blocks|key|3148791|text|看看这是否对你有帮助：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3148792|演示：|3148793|$('#notscroll').bind('mousewheel',+function()+{
+++++return+false
});|code-block|syntax|javascript|3148794|编辑：|offset|length|style|BOLD|3148795|试试这个：|3148796|++++$("body").delegate("div.scrollable","mouseover+mouseout",+function(e){
+++++++if(e.type+===+"mouseover"){
+++++++++++$('body').bind('mousewheel',function(){
+++++++++++++++return+false;
+++++++++++});
+++++++}else+if(e.type+===+"mouseout"){
+++++++++++$('body').bind('mousewheel',function(){
+++++++++++++++return+true;
+++++++++++});
+++++++}
++++});|3148797|entityMap^0|0|0|0|0|3|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@$K|Y|L|Z|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|F|7|11|8|@]|9|@]|A|$G|H]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

see if this help you:

demo: <a href="http://jsfiddle.net/9LHLg/5/" rel="nofollow">jsfiddle</a>

<pre><code>$('#notscroll').bind('mousewheel', function() {
 return false
});
</code></pre>

edit: 

try this:

<pre><code> $("body").delegate("div.scrollable","mouseover mouseout", function(e){
 if(e.type === "mouseover"){
 $('body').bind('mousewheel',function(){
 return false;
 });
 }else if(e.type === "mouseout"){
 $('body').bind('mousewheel',function(){
 return true;
 });
 }
 });
</code></pre>

blocks|key|2934322|text|DIV+2:我的解决方案是完全禁用浏览器的本机滚动功能(当光标位于内部时)，然后使用JavaScript手动滚动DIV(通过设置其.scrollTop属性)。一种替代的和IMO更好的方法是只有选择地禁用浏览器的滚动，以防止页面滚动，而不是DIV滚动。看看下面Rudie的答案，它演示了这个解决方案。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|2934323|2934324|这就是了：|2934325|$(+'.scrollable'+).on(+'mousewheel+DOMMouseScroll',+function+(+e+)+{
++++var+e0+=+e.originalEvent,
++++++++delta+=+e0.wheelDelta+%7C%7C+-e0.detail;

++++this.scrollTop+%2B=+(+delta+<+0+?+1+:+-1+)+*+30;
++++e.preventDefault();
});|code-block|syntax|javascript|2934326|现场演示：+https://jsbin.com/howojuq/edit?js,output|2934327|因此，您手动设置滚动位置，然后阻止默认行为(即滚动DIV或整个网页)。|2934328|更新1:正如克里斯在下面的评论中指出的那样，在较新版本的jQuery中，增量信息嵌套在.originalEvent对象中，即jQuery不再在其自定义事件对象中公开它，我们必须从本地事件对象中检索它。|2934329|entityMap|0|LINK|mutability|MUTABLE|url|https://jsbin.com/howojuq/edit?js,output^0|X|38|1T|A|0|0|0|5|0|0|0|5|6|14|6|14|0|0|0|Z|0|0|2S|17|E|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]|$9|15|A|16|B|D]]|E|@]|F|$]]|$1|G|3|-4|5|6|7|17|8|@]|E|@]|F|$]]|$1|H|3|I|5|6|7|18|8|@$9|19|A|1A|B|C]]|E|@]|F|$]]|$1|J|3|K|5|L|7|1B|8|@]|E|@]|F|$M|N]]|$1|O|3|P|5|6|7|1C|8|@$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]]|E|@$9|1H|A|1I|1|1J]]|F|$]]|$1|Q|3|R|5|6|7|1K|8|@$9|1L|A|1M|B|C]]|E|@]|F|$]]|$1|S|3|T|5|6|7|1N|8|@$9|1O|A|1P|B|C]|$9|1Q|A|1R|B|D]]|E|@]|F|$]]|$1|U|3|-4|5|6|7|1S|8|@]|E|@]|F|$]]]|V|$W|$5|X|Y|Z|F|$10|11]]]]

Update 2: My solution is based on disabling the browser's native scrolling altogether (when cursor is inside the DIV) and then manually scrolling the DIV with JavaScript (by setting its <code>.scrollTop</code> property). An alternative and IMO better approach would be to only selectively disable the browser's scrolling in order to prevent the page scroll, but not the DIV scroll. Check out Rudie's answer below which demonstrates this solution. 

<hr>

Here you go:

<pre><code>$( '.scrollable' ).on( 'mousewheel DOMMouseScroll', function ( e ) {
 var e0 = e.originalEvent,
 delta = e0.wheelDelta || -e0.detail;

 this.scrollTop += ( delta &lt; 0 ? 1 : -1 ) * 30;
 e.preventDefault();
});
</code></pre>

Live demo: <a href="https://jsbin.com/howojuq/edit?js,output">https://jsbin.com/howojuq/edit?js,output</a>

So you manually set the scroll position and then just prevent the default behavior (which would be to scroll the DIV or whole web-page).

Update 1: As Chris noted in the comments below, in newer versions of jQuery, the delta information is nested within the <code>.originalEvent</code> object, i.e. jQuery does not expose it in its custom Event object anymore and we have to retrieve it from the native Event object instead.

blocks|key|2934372|text|如果你不关心与较老的IE版本(<+8)的兼容性，你可以制作一个自定义的jQuery插件，然后在溢出元素上调用它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2934373|这个解决方案比Šime+Vidas建议的方案更有优势，因为它不会覆盖滚动行为-它只是在适当的时候阻止它。|2934374|$.fn.isolatedScroll+=+function()+{
++++this.bind('mousewheel+DOMMouseScroll',+function+(e)+{
++++++++var+delta+=+e.wheelDelta+%7C%7C+(e.originalEvent+&&+e.originalEvent.wheelDelta)+%7C%7C+-e.detail,
++++++++++++bottomOverflow+=+this.scrollTop+%2B+$(this).outerHeight()+-+this.scrollHeight+>=+0,
++++++++++++topOverflow+=+this.scrollTop+<=+0;

++++++++if+((delta+<+0+&&+bottomOverflow)+%7C%7C+(delta+>+0+&&+topOverflow))+{
++++++++++++e.preventDefault();
++++++++}
++++});
++++return+this;
};

$('.scrollable').isolatedScroll();|code-block|syntax|javascript|2934375|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

If you don't care about the compatibility with older IE versions (&lt; 8), you could make a custom jQuery plugin and then call it on the overflowing element.

This solution has an advantage over the one Šime Vidas proposed, as it doesn't overwrite the scrolling behavior - it just blocks it when appropriate.

<pre><code>$.fn.isolatedScroll = function() {
 this.bind('mousewheel DOMMouseScroll', function (e) {
 var delta = e.wheelDelta || (e.originalEvent &amp;&amp; e.originalEvent.wheelDelta) || -e.detail,
 bottomOverflow = this.scrollTop + $(this).outerHeight() - this.scrollHeight &gt;= 0,
 topOverflow = this.scrollTop &lt;= 0;

 if ((delta &lt; 0 &amp;&amp; bottomOverflow) || (delta &gt; 0 &amp;&amp; topOverflow)) {
 e.preventDefault();
 }
 });
 return this;
};

$('.scrollable').isolatedScroll();
</code></pre>

blocks|key|250647|text|在我看来，一个不那么麻烦的解决方案是，当你将鼠标放在可滚动的div上时，将overflow设置为隐藏在body上。这将阻止正文滚动，但会出现不想要的“跳跃”效果。下面的解决方案解决了这个问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|250648|jQuery(".scrollable")
++++.mouseenter(function(e)+{
++++++++//+get+body+width+now
++++++++var+body_width+=+jQuery("body").width();
++++++++//+set+overflow+hidden+on+body.+this+will+prevent+it+scrolling
++++++++jQuery("body").css("overflow",+"hidden");+
++++++++//+get+new+body+width.+no+scrollbar+now,+so+it+will+be+bigger
++++++++var+new_body_width+=+jQuery("body").width();
++++++++//+set+the+difference+between+new+width+and+old+width+as+padding+to+prevent+jumps+++++++++++++++++++++++++++++++++++++
++++++++jQuery("body").css("padding-right",+(new_body_width+-+body_width)%2B"px");
++++})
++++.mouseleave(function(e)+{
++++++++jQuery("body").css({
++++++++++++overflow:+"auto",
++++++++++++padding-right:+"0px"
++++++++});
++++})|code-block|syntax|javascript|250649|如果需要的话，你可以让你的代码更智能。例如，您可以测试正文是否已有填充，如果已有填充，则向其添加新的填充。|250650|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

A less hacky solution, in my opinion is to set overflow hidden on the body when you mouse over the scrollable div. This will prevent the body from scrolling, but an unwanted "jumping" effect will occur. The following solution works around that:

<pre><code>jQuery(".scrollable")
 .mouseenter(function(e) {
 // get body width now
 var body_width = jQuery("body").width();
 // set overflow hidden on body. this will prevent it scrolling
 jQuery("body").css("overflow", "hidden"); 
 // get new body width. no scrollbar now, so it will be bigger
 var new_body_width = jQuery("body").width();
 // set the difference between new width and old width as padding to prevent jumps 
 jQuery("body").css("padding-right", (new_body_width - body_width)+"px");
 })
 .mouseleave(function(e) {
 jQuery("body").css({
 overflow: "auto",
 padding-right: "0px"
 });
 })
</code></pre>

You could make your code smarter if needed. For example, you could test if the body already has a padding and if yes, add the new padding to that.

blocks|key|255635|text|我认为有时可以取消鼠标滚动事件：http://jsfiddle.net/rudiedirkx/F8qSq/show/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|255636|$elem.on('wheel',+function(e)+{
++++var+d+=+e.originalEvent.deltaY,
++++++++dir+=+d+<+0+?+'up'+:+'down',
++++++++stop+=+(dir+==+'up'+&&+this.scrollTop+==+0)+%7C%7C+
+++++++++++++++(dir+==+'down'+&&+this.scrollTop+==+this.scrollHeight-this.offsetHeight);
++++stop+&&+e.preventDefault();
});|code-block|syntax|javascript|255637|在事件处理程序中，您需要知道：|255638|255639|滚动方向|unordered-list-item|255640|255641|d+=+e.originalEvent.deltaY,+dir+=+d+<+0+?+'up'+:+'down'，因为正数表示向下滚动|style|CODE|255642|滚动位置|255643|255644|scrollTop表示顶部，scrollHeight+-+scrollTop+-+offsetHeight表示底部|255645|如果你是|255646|255647|向上滚动，top+=+0或|255648|向下滚动，bottom+=+0，|255649|255650|取消事件：e.preventDefault()+(甚至可能是e.stopPropagation())。|255651|我认为最好不要覆盖浏览器的滚动行为。只有在适当的时候才取消它。|255652|它可能不是完美的xbrowser，但也不会很难。也许Mac的双滚动方向有点棘手……|255653|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/rudiedirkx/F8qSq/show/^0|G|16|0|0|0|0|0|0|0|0|1J|0|0|0|0|9|E|13|0|0|0|5|7|0|5|A|0|0|5|I|U|J|0|0|0^^$0|@$1|2|3|4|5|6|7|1K|8|@]|9|@$A|1L|B|1M|1|1N]]|C|$]]|$1|D|3|E|5|F|7|1O|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|1P|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|1Q|8|@]|9|@]|C|$]]|$1|L|3|M|5|N|7|1R|8|@]|9|@]|C|$]]|$1|O|3|-4|5|6|7|1S|8|@]|9|@]|C|$]]|$1|P|3|Q|5|6|7|1T|8|@$A|1U|B|1V|R|S]]|9|@]|C|$]]|$1|T|3|U|5|N|7|1W|8|@]|9|@]|C|$]]|$1|V|3|-4|5|6|7|1X|8|@]|9|@]|C|$]]|$1|W|3|X|5|6|7|1Y|8|@$A|1Z|B|20|R|S]|$A|21|B|22|R|S]]|9|@]|C|$]]|$1|Y|3|Z|5|6|7|23|8|@]|9|@]|C|$]]|$1|10|3|-4|5|6|7|24|8|@]|9|@]|C|$]]|$1|11|3|12|5|N|7|25|8|@$A|26|B|27|R|S]]|9|@]|C|$]]|$1|13|3|14|5|N|7|28|8|@$A|29|B|2A|R|S]]|9|@]|C|$]]|$1|15|3|-4|5|6|7|2B|8|@]|9|@]|C|$]]|$1|16|3|17|5|6|7|2C|8|@$A|2D|B|2E|R|S]|$A|2F|B|2G|R|S]]|9|@]|C|$]]|$1|18|3|19|5|6|7|2H|8|@]|9|@]|C|$]]|$1|1A|3|1B|5|6|7|2I|8|@]|9|@]|C|$]]|$1|1C|3|-4|5|6|7|2J|8|@]|9|@]|C|$]]]|1D|$1E|$5|1F|1G|1H|C|$1I|1J]]]]

I think it's possible to cancel the mousescroll event sometimes: <a href="http://jsfiddle.net/rudiedirkx/F8qSq/show/" rel="nofollow noreferrer">http://jsfiddle.net/rudiedirkx/F8qSq/show/</a>

<pre><code>$elem.on('wheel', function(e) {
 var d = e.originalEvent.deltaY,
 dir = d &lt; 0 ? 'up' : 'down',
 stop = (dir == 'up' &amp;&amp; this.scrollTop == 0) || 
 (dir == 'down' &amp;&amp; this.scrollTop == this.scrollHeight-this.offsetHeight);
 stop &amp;&amp; e.preventDefault();
});
</code></pre>

Inside the event handler, you'll need to know:

<ul>
<li>scrolling direction 
<code>d = e.originalEvent.deltaY, dir = d &lt; 0 ? 'up' : 'down'</code>
because a positive number means scrolling down</li>
<li>scroll position 
<code>scrollTop</code> for top, <code>scrollHeight - scrollTop - offsetHeight</code> for bottom</li>
</ul>

If you're

<ul>
<li>scrolling up, and <code>top = 0</code>, or</li>
<li>scrolling down, and <code>bottom = 0</code>,</li>
</ul>

cancel the event: <code>e.preventDefault()</code> (and maybe even <code>e.stopPropagation()</code>).

I think it's better to not override the browser's scrolling behaviour. Only cancel it when applicable.

It's probablt not perfectly xbrowser, but it can't be very hard. Maybe Mac's dual scroll direction is tricky though...

blocks|key|254479|text|这是我在应用程序中使用的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|254480|我禁用了主体溢出，并将整个网站html放在容器div中。网站容器已经溢出，因此用户可以像预期的那样滚动页面。|254481|然后，我创建了一个具有更高z索引的同级div+(#Prevent)，它覆盖了整个网站。由于#Prevent具有更高的z-index，因此它与网站容器重叠。当#Prevent可见时，鼠标将不再悬停在网站容器上，因此无法滚动。|254482|当然，您可以放置另一个div，比如您的modal，在标记中使用比#Prevent更高的z索引。这使您可以创建不受滚动问题影响的弹出窗口。|254483|这个解决方案更好，因为它不会隐藏滚动条(跳跃效果)。它不需要事件监听器，而且很容易实现。它可以在所有浏览器中工作，尽管对于IE7+&8，您必须尝试一下(取决于您的特定代码)。|254484|html|254485|<body>
++<div+id="YourModal"+style="display:none;"></div>
++<div+id="Prevent"+style="display:none;"></div>
++<div+id="WebsiteContainer">
+++++<div+id="Website">
+++++website+goes+here...
+++++</div>
++</div>
</body>|code-block|syntax|javascript|254486|css|254487|body+{+overflow:+hidden;+}

#YourModal+{
+z-index:200;
+/*+modal+styles+here+*/
}

#Prevent+{
+z-index:100;
+position:absolute;
+left:0px;
+height:100%25;
+width:100%25;
+background:transparent;
}

#WebsiteContainer+{
++z-index:50;
++overflow:auto;
++position:+absolute;
++height:100%25;
++width:100%25;
}
#Website+{
++position:relative;
}|254488|jquery/js|254489|function+PreventScroll(A)+{+
++switch+(A)+{
++++case+'on':+$('#Prevent').show();+break;
++++case+'off':+$('#Prevent').hide();+break;
++}
}|254490|禁用/启用滚动|254491|PreventScroll('on');+//+prevent+scrolling
PreventScroll('off');+//+allow+scrolling|254492|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|17|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|18|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|19|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1A|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1B|8|@]|9|@]|A|$]]|$1|S|3|T|5|N|7|1C|8|@]|9|@]|A|$O|P]]|$1|U|3|V|5|6|7|1D|8|@]|9|@]|A|$]]|$1|W|3|X|5|N|7|1E|8|@]|9|@]|A|$O|P]]|$1|Y|3|Z|5|6|7|1F|8|@]|9|@]|A|$]]|$1|10|3|11|5|N|7|1G|8|@]|9|@]|A|$O|P]]|$1|12|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|13|$]]

Here is my solution I've used in applications.

I disabled the body overflow and placed the entire website html inside container div's. The website containers have overflow and therefore the user may scroll the page as expected.

I then created a sibling div (#Prevent) with a higher z-index that covers the entire website. Since #Prevent has a higher z-index, it overlaps the website container. When #Prevent is visible the mouse is no longer hovering the website containers, so scrolling isn't possible.

You may of course place another div, such as your modal, with a higher z-index than #Prevent in the markup. This allows you to create pop-up windows that don't suffer from scrolling issues.

This solution is better because it doesn't hide the scrollbars (jumping affect). It doesn't require event listeners and it's easy to implement. It works in all browsers, although with IE7 &amp; 8 you have to play around (depends on your specific code). 

html

<pre><code>&lt;body&gt;
 &lt;div id="YourModal" style="display:none;"&gt;&lt;/div&gt;
 &lt;div id="Prevent" style="display:none;"&gt;&lt;/div&gt;
 &lt;div id="WebsiteContainer"&gt;
 &lt;div id="Website"&gt;
 website goes here...
 &lt;/div&gt;
 &lt;/div&gt;
&lt;/body&gt;
</code></pre>

css

<pre><code>body { overflow: hidden; }

#YourModal {
 z-index:200;
 /* modal styles here */
}

#Prevent {
 z-index:100;
 position:absolute;
 left:0px;
 height:100%;
 width:100%;
 background:transparent;
}

#WebsiteContainer {
 z-index:50;
 overflow:auto;
 position: absolute;
 height:100%;
 width:100%;
}
#Website {
 position:relative;
}
</code></pre>

jquery/js

<pre><code>function PreventScroll(A) { 
 switch (A) {
 case 'on': $('#Prevent').show(); break;
 case 'off': $('#Prevent').hide(); break;
 }
}
</code></pre>

disable/enable the scroll

<pre><code>PreventScroll('on'); // prevent scrolling
PreventScroll('off'); // allow scrolling
</code></pre>

blocks|key|3148969|text|纯javascript版本的Vidas的答案是，el$是您正在滚动的平面的DOM节点。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3148970|function+onlyScrollElement(event,+el$)+{
++++var+delta+=+event.wheelDelta+%7C%7C+-event.detail;
++++el$.scrollTop+%2B=+(delta+<+0+?+1+:+-1)+*+10;
++++event.preventDefault();
}|code-block|syntax|javascript|3148971|请确保您不会连接多次！下面是一个例子，|3148972|var+ul$+=+document.getElementById('yo-list');
//+IE9,+Chrome,+Safari,+Opera
ul$.removeEventListener('mousewheel',+onlyScrollElement);
ul$.addEventListener('mousewheel',+onlyScrollElement);
//+Firefox
ul$.removeEventListener('DOMMouseScroll',+onlyScrollElement);
ul$.addEventListener('DOMMouseScroll',+onlyScrollElement);|3148973|Word+of+caution，这个函数需要一个常量，如果你每次都在附加它之前重新初始化该函数，即。var+func+=+function+(...)+removeEventListener将不起作用。|BOLD|3148974|entityMap^0|O|3|0|0|0|0|0|F|1E|P|24|J|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|W|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|X|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|Z|8|@$9|10|A|11|B|Q]|$9|12|A|13|B|C]|$9|14|A|15|B|C]]|D|@]|E|$]]|$1|R|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|S|$]]

Pure javascript version of Vidas's answer, <code>el$</code> is the DOM node of the plane you are scrolling.

<pre><code>function onlyScrollElement(event, el$) {
 var delta = event.wheelDelta || -event.detail;
 el$.scrollTop += (delta &lt; 0 ? 1 : -1) * 10;
 event.preventDefault();
}
</code></pre>

Make sure you dont attach the even multiple times! Here is an example,

<pre><code>var ul$ = document.getElementById('yo-list');
// IE9, Chrome, Safari, Opera
ul$.removeEventListener('mousewheel', onlyScrollElement);
ul$.addEventListener('mousewheel', onlyScrollElement);
// Firefox
ul$.removeEventListener('DOMMouseScroll', onlyScrollElement);
ul$.addEventListener('DOMMouseScroll', onlyScrollElement);
</code></pre>

Word of caution, the function there needs to be a constant, if you reinitialize the function each time before attaching it, ie. <code>var func = function (...)</code> the <code>removeEventListener</code> will not work.

blocks|key|3149014|text|您可以在没有JavaScript的情况下做到这一点。您可以将这两个div上的样式设置为position:+fixed和overflow-y:+auto。您可能需要通过设置其z-index+(如果它们重叠)来使其中一个高于另一个。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3149015|这是a+basic+example+on+CodePen。|3149016|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/carlsmith/pen/LpZVGE^0|17|F|1N|G|2E|7|0|2|Q|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|H|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

You can do this without JavaScript. You can set the style on both divs to <code>position: fixed</code> and <code>overflow-y: auto</code>. You may need to make one of them higher than the other by setting its <code>z-index</code> (if they overlap).

Here's <a href="http://codepen.io/carlsmith/pen/LpZVGE" rel="nofollow">a basic example on CodePen</a>.

blocks|key|3149045|text|在上面的解决方案中，有一个关于Firefox的小错误。在火狐中，"DOMMouseScroll“事件没有e.detail属性，要获得这个属性，你应该写下下面的”e.OriginalEvent.Detail“。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3149046|以下是Firefox的一个有效解决方案：|3149047|$.fn.isolatedScroll+=+function()+{
++++this.on('mousewheel+DOMMouseScroll',+function+(e)+{
++++++++var+delta+=+e.wheelDelta+%7C%7C+(e.originalEvent+&&+e.originalEvent.wheelDelta)+%7C%7C+-e.originalEvent.detail,
++++++++++++bottomOverflow+=+(this.scrollTop+%2B+$(this).outerHeight()+-+this.scrollHeight)+>=+0,
++++++++++++topOverflow+=+this.scrollTop+<=+0;

++++++++if+((delta+<+0+&&+bottomOverflow)+%7C%7C+(delta+>+0+&&+topOverflow))+{
++++++++++++e.preventDefault();
++++++++}
++++});
++++return+this;
};|code-block|syntax|javascript|3149048|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

In the solution above there is a little mistake regarding Firefox. In Firefox "DOMMouseScroll" event has no e.detail property,to get this property you should write the following 'e.originalEvent.detail'.

Here is a working solution for Firefox:

<pre><code>$.fn.isolatedScroll = function() {
 this.on('mousewheel DOMMouseScroll', function (e) {
 var delta = e.wheelDelta || (e.originalEvent &amp;&amp; e.originalEvent.wheelDelta) || -e.originalEvent.detail,
 bottomOverflow = (this.scrollTop + $(this).outerHeight() - this.scrollHeight) &gt;= 0,
 topOverflow = this.scrollTop &lt;= 0;

 if ((delta &lt; 0 &amp;&amp; bottomOverflow) || (delta &gt; 0 &amp;&amp; topOverflow)) {
 e.preventDefault();
 }
 });
 return this;
};
</code></pre>

blocks|key|2934535|text|这是一个没有jQuery的简单解决方案，它不会破坏浏览器的原生滚动(这就是:没有人工/丑陋的滚动)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2934536|var+scrollable+=+document.querySelector('.scrollable');

scrollable.addEventListener('wheel',+function(event)+{
++++var+deltaY+=+event.deltaY;
++++var+contentHeight+=+scrollable.scrollHeight;
++++var+visibleHeight+=+scrollable.offsetHeight;
++++var+scrollTop+=+scrollable.scrollTop;

++++if+(scrollTop+===+0+&&+deltaY+<+0)
++++++++event.preventDefault();
++++else+if+(visibleHeight+%2B+scrollTop+===+contentHeight+&&+deltaY+>+0)
++++++++event.preventDefault();
});|code-block|syntax|javascript|2934537|现场演示：http://jsfiddle.net/ibcaliax/bwmzfmq7/4/|offset|length|2934538|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/ibcaliax/bwmzfmq7/4/^0|0|0|5|14|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

here a simple solution without jQuery which does not destroy the browser native scroll (this is: no artificial/ugly scrolling):

<pre><code>var scrollable = document.querySelector('.scrollable');

scrollable.addEventListener('wheel', function(event) {
 var deltaY = event.deltaY;
 var contentHeight = scrollable.scrollHeight;
 var visibleHeight = scrollable.offsetHeight;
 var scrollTop = scrollable.scrollTop;

 if (scrollTop === 0 &amp;&amp; deltaY &lt; 0)
 event.preventDefault();
 else if (visibleHeight + scrollTop === contentHeight &amp;&amp; deltaY &gt; 0)
 event.preventDefault();
});
</code></pre>

Live demo: <a href="http://jsfiddle.net/ibcaliax/bwmzfmq7/4/" rel="nofollow">http://jsfiddle.net/ibcaliax/bwmzfmq7/4/</a>

blocks|key|3149077|text|我需要将此事件添加到可能具有滚动条的多个元素中。对于没有滚动条的情况，主滚动条不能正常工作。所以我对@Šime代码做了一个小改动，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3149078|$(+'.scrollable'+).on(+'mousewheel+DOMMouseScroll',+function+(+e+)+{
++++if($(this).prop('scrollHeight')+>+$(this).height())
++++{
++++++++var+e0+=+e.originalEvent,+delta+=+e0.wheelDelta+%7C%7C+-e0.detail;

++++++++this.scrollTop+%2B=+(+delta+<+0+?+1+:+-1+)+*+30;
++++++++e.preventDefault();
++++}+++++++
});|code-block|syntax|javascript|3149079|现在，只有带有滚动条的元素才会阻止主滚动从begin+stopped。|3149080|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I needed to add this event to multiple elements that might have a scrollbar. For the cases where no scrollbar was present, the main scrollbar didn't work as it should. So i made a small change to @Šime code as follows:

<pre><code>$( '.scrollable' ).on( 'mousewheel DOMMouseScroll', function ( e ) {
 if($(this).prop('scrollHeight') &gt; $(this).height())
 {
 var e0 = e.originalEvent, delta = e0.wheelDelta || -e0.detail;

 this.scrollTop += ( delta &lt; 0 ? 1 : -1 ) * 30;
 e.preventDefault();
 } 
});
</code></pre>

Now, only elements with a scrollbar will prevent the main scroll from begin stopped.

blocks|key|2934570|text|这是一个在滚动特定div时防止父滚动的插件，它有一堆选项可供选择。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2934571|点击这里查看：|2934572|https://github.com/MohammadYounes/jquery-scrollLock|offset|length|2934573|使用|style|BOLD|2934574|通过JavaScript触发卷轴锁定：|2934575|$('#target').scrollLock();|code-block|syntax|javascript|2934576|Trigger+Scroll+Lock通过标记：|2934577|++++
<div+data-scrollLock
+++++data-strict='true'
+++++data-selector='.child'
+++++data-animation='{"top":"top+locked","bottom":"bottom+locked"}'
+++++data-keyboard='{"tabindex":0}'
+++++data-unblock='.inner'>
+++++...
</div>


<script+type="text/javascript">
++$('[data-scrollLock]').scrollLock()
</script>|2934578|查看Demo|2934579|entityMap|0|LINK|mutability|MUTABLE|url|1|http://mohammadyounes.github.io/jquery-scrollLock/#demo^0|0|0|0|1F|0|0|0|2|0|0|0|0|0|2|4|1|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|18|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|19|8|@]|9|@$F|1A|G|1B|1|1C]]|A|$]]|$1|H|3|I|5|6|7|1D|8|@$F|1E|G|1F|J|K]]|9|@]|A|$]]|$1|L|3|M|5|6|7|1G|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|1H|8|@]|9|@]|A|$Q|R]]|$1|S|3|T|5|6|7|1I|8|@]|9|@]|A|$]]|$1|U|3|V|5|P|7|1J|8|@]|9|@]|A|$Q|R]]|$1|W|3|X|5|6|7|1K|8|@]|9|@$F|1L|G|1M|1|1N]]|A|$]]|$1|Y|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|E]]|15|$5|11|12|13|A|$14|16]]]]

Here is the plugin that is useful for preventing parent scroll while scrolling a specific div and has a bunch of options to play with.

Check it out here: 

<a href="https://github.com/MohammadYounes/jquery-scrollLock" rel="nofollow noreferrer">https://github.com/MohammadYounes/jquery-scrollLock</a>

Usage

Trigger Scroll Lock via JavaScript:

<pre><code>$('#target').scrollLock();
</code></pre>

Trigger Scroll Lock via Markup:

<pre><code> &lt;!-- HTML --&gt;
&lt;div data-scrollLock
 data-strict='true'
 data-selector='.child'
 data-animation='{"top":"top locked","bottom":"bottom locked"}'
 data-keyboard='{"tabindex":0}'
 data-unblock='.inner'&gt;
 ...
&lt;/div&gt;

&lt;!-- JavaScript --&gt;
&lt;script type="text/javascript"&gt;
 $('[data-scrollLock]').scrollLock()
&lt;/script&gt;
</code></pre>

View <a href="http://mohammadyounes.github.io/jquery-scrollLock/#demo" rel="nofollow noreferrer">Demo</a>

blocks|key|3149115|text|使用下面的CSS属性overscroll-behavior:+contain;到子元素|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3149116|entityMap^0|A|T|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

Use below CSS property 
<code>overscroll-behavior: contain;</code> to child element

blocks|key|255738|text|你所需要的是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|255739|e.preventDefault();|code-block|syntax|javascript|255740|在子元素上。|255741|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

All you need is
<pre><code>e.preventDefault();
</code></pre>
on child element.

I have reviewed and tested the various functions for preventing the body ability to scroll whilst inside a div and have combined a function that should work.

<pre><code>$('.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;
 });
});
</code></pre>

<ul>
<li>This is stopping all scrolling where as I want scrolling to still be possible inside the container</li>
<li>This is also not deactivating on mouse leave</li>
</ul>

Any ideas, or better ways of doing this?

How to prevent page scrolling when scrolling a DIV element?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我已经检查和测试了防止身体在div中滚动的各种功能，并组合了一个应该可以工作的功能。$('.scrollable').mouseenter(function() {    $('body').bind('mousewheel DOMMouseScroll', function() {        return fal...

问如何在滚动DIV元素时防止页面滚动？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在滚动DIV元素时防止页面滚动？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在滚动DIV元素时防止页面滚动？
EN