blocks|key|297588|text|我找到的唯一方法类似于你所描述的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|297589|297590|抓取当前滚动位置(不要忘记水平轴！)。|ordered-list-item|297591|将overflow设置为隐藏(可能希望保留以前的溢出值)。|297592|使用scrollTo()将文档滚动到存储的滚动位置。|297593|297594|然后，当您准备好再次允许滚动时，撤消所有这些操作。|297595|编辑:没有理由我不能给你代码，因为我费了好大劲才把它挖出来……|297596|//+lock+scroll+position,+but+retain+settings+for+later
var+scrollPosition+=+[
++self.pageXOffset+%7C%7C+document.documentElement.scrollLeft+%7C%7C+document.body.scrollLeft,
++self.pageYOffset+%7C%7C+document.documentElement.scrollTop++%7C%7C+document.body.scrollTop
];
var+html+=+jQuery('html');+//+it+would+make+more+sense+to+apply+this+to+body,+but+IE7+won't+have+that
html.data('scroll-position',+scrollPosition);
html.data('previous-overflow',+html.css('overflow'));
html.css('overflow',+'hidden');
window.scrollTo(scrollPosition[0],+scrollPosition[1]);


//+un-lock+scroll+position
var+html+=+jQuery('html');
var+scrollPosition+=+html.data('scroll-position');
html.css('overflow',+html.data('previous-overflow'));
window.scrollTo(scrollPosition[0],+scrollPosition[1])|code-block|syntax|javascript|297597|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|W|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|X|8|@]|9|@]|A|$]]|$1|F|3|G|5|E|7|Y|8|@]|9|@]|A|$]]|$1|H|3|I|5|E|7|Z|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|10|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|11|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|12|8|@]|9|@]|A|$]]|$1|O|3|P|5|Q|7|13|8|@]|9|@]|A|$R|S]]|$1|T|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|U|$]]

The only way I've found to do this is similar to what you described:

<ol>
<li>Grab current scroll position (don't forget horizontal axis!).</li>
<li>Set overflow to hidden (probably want to retain previous overflow value).</li>
<li>Scroll document to stored scroll position with scrollTo().</li>
</ol>

Then when you're ready to allow scrolling again, undo all that.

Edit: no reason I can't give you the code since I went to the trouble to dig it up...

<pre><code>// lock scroll position, but retain settings for later
var scrollPosition = [
 self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
 self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
];
var html = jQuery('html'); // it would make more sense to apply this to body, but IE7 won't have that
html.data('scroll-position', scrollPosition);
html.data('previous-overflow', html.css('overflow'));
html.css('overflow', 'hidden');
window.scrollTo(scrollPosition[0], scrollPosition[1]);


// un-lock scroll position
var html = jQuery('html');
var scrollPosition = html.data('scroll-position');
html.css('overflow', html.data('previous-overflow'));
window.scrollTo(scrollPosition[0], scrollPosition[1])
</code></pre>

blocks|key|3023498|text|这可能会对您的目的起作用，也可能不起作用，但您可以扩展jScrollPane，使其在滚动之前触发其他功能。我只是稍微测试了一下，但我可以确认你可以跳起来，完全阻止滚动。我所做的就是：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3023499|下载演示压缩包：http://github.com/vitch/jScrollPane/archives/master|3023500|Open+the“|unordered-list-item|3023501|
|3023502|”demo+(events.html)|3023503|3023504|Edit+it+to+use+the+non-minified+script+source：<script+type="text/javascript"+src="script/jquery.jscrollpane.js"></script>|style|CODE|3023505|3023506|Within+jquery.jscrollpane.js，在第666行插入一个“http://github.com/vitch/jScrollPane/archives/master|3023507|3023508|Open；”(吉利行号！但是，如果您的版本略有不同，这是positionDragY(destY,+animate)函数|3023509|
的第一行|3023510|启动events.html，你会看到一个正常的滚动框，由于你的代码干预，它不会滚动。|3023511|您可以通过这种方式控制整个浏览器的滚动条(请参阅fullpage_scroll.html)。|3023512|因此，假设下一步是添加对其他函数的调用，该函数将触发并执行锚定魔术，然后决定是否继续滚动。您还可以使用API调用来设置scrollTop和scrollLeft。|3023513|如果你需要更多的帮助，请在你想要的地方发布！|3023514|希望这能有所帮助。|3023515|entityMap|0|LINK|mutability|MUTABLE|url|http://jscrollpane.kelvinluck.com/index.html|1|http://github.com/vitch/jScrollPane/archives/master|2^0|R|B|0|0|8|1F|1|0|0|0|0|0|1A|23|0|0|14|1F|2|0|0|S|T|0|0|0|0|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|6|7|1O|8|@]|9|@$A|1P|B|1Q|1|1R]]|C|$]]|$1|F|3|G|5|H|7|1S|8|@]|9|@]|C|$]]|$1|I|3|J|5|6|7|1T|8|@]|9|@]|C|$]]|$1|K|3|L|5|H|7|1U|8|@]|9|@]|C|$]]|$1|M|3|J|5|6|7|1V|8|@]|9|@]|C|$]]|$1|N|3|O|5|H|7|1W|8|@$A|1X|B|1Y|P|Q]]|9|@]|C|$]]|$1|R|3|J|5|6|7|1Z|8|@]|9|@]|C|$]]|$1|S|3|T|5|H|7|20|8|@]|9|@$A|21|B|22|1|23]]|C|$]]|$1|U|3|J|5|6|7|24|8|@]|9|@]|C|$]]|$1|V|3|W|5|H|7|25|8|@$A|26|B|27|P|Q]]|9|@]|C|$]]|$1|X|3|Y|5|6|7|28|8|@]|9|@]|C|$]]|$1|Z|3|10|5|6|7|29|8|@]|9|@]|C|$]]|$1|11|3|12|5|6|7|2A|8|@]|9|@]|C|$]]|$1|13|3|14|5|6|7|2B|8|@]|9|@]|C|$]]|$1|15|3|16|5|6|7|2C|8|@]|9|@]|C|$]]|$1|17|3|18|5|6|7|2D|8|@]|9|@]|C|$]]|$1|19|3|-4|5|6|7|2E|8|@]|9|@]|C|$]]]|1A|$1B|$5|1C|1D|1E|C|$1F|1G]]|1H|$5|1C|1D|1E|C|$1F|1I]]|1J|$5|1C|1D|1E|C|$1F|1I]]]]

This may or may not work for your purposes, but you can extend <a href="http://jscrollpane.kelvinluck.com/index.html" rel="nofollow">jScrollPane</a> to fire other functionality before it does its scrolling. I've only just tested this a little bit, but I can confirm that you can jump in and prevent the scrolling entirely. All I did was:

<ul>
<li>Download the demo zip: <a href="http://github.com/vitch/jScrollPane/archives/master" rel="nofollow">http://github.com/vitch/jScrollPane/archives/master</a></li>
<li>Open the "Events" demo (events.html)</li>
<li>Edit it to use the non-minified script source: <code>&lt;script type="text/javascript" src="script/jquery.jscrollpane.js"&gt;&lt;/script&gt;</code></li>
<li>Within jquery.jscrollpane.js, insert a "return;" at line 666 (auspicious line number! but in case your version differs slightly, this is the first line of the <code>positionDragY(destY, animate)</code> function</li>
</ul>

Fire up events.html, and you'll see a normally scrolling box which due to your coding intervention won't scroll.

You can control the entire browser's scrollbars this way (see fullpage_scroll.html). 

So, presumably the next step is to add a call to some other function that goes off and does your anchoring magic, then decides whether to continue with the scroll or not. You've also got API calls to set scrollTop and scrollLeft.

If you want more help, post where you get up to!

Hope this has helped.

blocks|key|3237924|text|你就不能把body+height设置为100%25并隐藏溢出吗？请参阅http://jsbin.com/ikuma4/13/edit|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3237925|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/ikuma4/13/edit^0|X|V|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Can't you just set the body height to 100% and overflow hidden? See <a href="http://jsbin.com/ikuma4/13/edit" rel="nofollow">http://jsbin.com/ikuma4/13/edit</a>

blocks|key|3237951|text|我在这里给出了一个可能有用的答案：jQuery+simplemodal+disable+scrolling|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3237952|它展示了如何在不移动文本的情况下关闭滚动条。你可以忽略关于simplemodal的部分。|3237953|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/5485244/jquery-simplemodal-disable-scrolling/6403909#6403909^0|H|10|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

I put an answer that might help here:
<a href="https://stackoverflow.com/questions/5485244/jquery-simplemodal-disable-scrolling/6403909#6403909">jQuery simplemodal disable scrolling</a>

It shows how to turn off the scroll bars without shifting the text around. You can ignore the parts about simplemodal.

blocks|key|3237961|text|您可以使用以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3237962|$("body").css("overflow",+"hidden");|code-block|syntax|javascript|3237963|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

you can use this code:

<pre><code>$("body").css("overflow", "hidden");
</code></pre>

blocks|key|295163|text|您可以使用可滚动的div来遮盖窗口，以防止页面上的内容滚动。而且，通过隐藏和显示，您可以锁定/解锁您的滚动。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|295164|这样做：|295165|#scrollLock+{
++++width:+100%25;
++++height:+100%25;
++++position:+fixed;
++++overflow:+scroll;
++++opacity:+0;
++++display:none
}

#scrollLock+>+div+{
++++height:+99999px;
}

function+scrollLock(){
++++$('#scrollLock').scrollTop('10000').show();
}

function+scrollUnlock(){
++++$('#scrollLock').hide();
}|code-block|syntax|javascript|295166|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|$]]

You can cover-up the window with a scrollable div for preventing scrolling of the content on a page.
And, by hiding and showing, you can lock/unlock your scroll.

Do something like this:

<pre><code>#scrollLock {
 width: 100%;
 height: 100%;
 position: fixed;
 overflow: scroll;
 opacity: 0;
 display:none
}

#scrollLock &gt; div {
 height: 99999px;
}

function scrollLock(){
 $('#scrollLock').scrollTop('10000').show();
}

function scrollUnlock(){
 $('#scrollLock').hide();
}
</code></pre>

blocks|key|3023653|text|我只是对tfe的解决方案做了一点调整。特别是，我添加了一些额外的控件，以确保当scrollbar设置为hidden时，页面内容移位(+no+shift+of+the+page+content+)(也称为页面移动)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|BOLD|entityRanges|data|3023654|可以分别定义两个Javascript函数lockScroll()和unlockScroll()来锁定和解锁页面滚动。|3023655|function+lockScroll(){
++++$html+=+$('html');+
++++$body+=+$('body');+
++++var+initWidth+=+$body.outerWidth();
++++var+initHeight+=+$body.outerHeight();

++++var+scrollPosition+=+[
++++++++self.pageXOffset+%7C%7C+document.documentElement.scrollLeft+%7C%7C+document.body.scrollLeft,
++++++++self.pageYOffset+%7C%7C+document.documentElement.scrollTop++%7C%7C+document.body.scrollTop
++++];
++++$html.data('scroll-position',+scrollPosition);
++++$html.data('previous-overflow',+$html.css('overflow'));
++++$html.css('overflow',+'hidden');
++++window.scrollTo(scrollPosition[0],+scrollPosition[1]);+++

++++var+marginR+=+$body.outerWidth()-initWidth;
++++var+marginB+=+$body.outerHeight()-initHeight;+
++++$body.css({'margin-right':+marginR,'margin-bottom':+marginB});
}+

function+unlockScroll(){
++++$html+=+$('html');
++++$body+=+$('body');
++++$html.css('overflow',+$html.data('previous-overflow'));
++++var+scrollPosition+=+$html.data('scroll-position');
++++window.scrollTo(scrollPosition[0],+scrollPosition[1]);++++

++++$body.css({'margin-right':+0,+'margin-bottom':+0});
}|code-block|syntax|javascript|3023656|我假设<body>没有初始边际。|3023657|请注意，虽然上面的解决方案在大多数实际情况下都有效，但它并不是决定性的，因为它需要对包含例如带有position:fixed的标题的页面进行一些进一步的定制。让我们通过一个例子来了解一下这个特殊情况。假设有|3023658|<body>
<div+id="header">My+fixedheader</div>

</body>|3023659|使用|3023660|#header{position:fixed;+padding:0;+margin:0;+width:100%25}|3023661|然后，应该在函数lockScroll()和unlockScroll()中添加以下内容|3023662|function+lockScroll(){
++++//Omissis+++


++++$('#header').css('margin-right',+marginR);
}+

function+unlockScroll(){
++++//Omissis+++

++++$('#header').css('margin-right',+0);
}|3023663|最后，注意一些可能的边距或填充的初始值。|3023664|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/users/203773^0|1F|6|1V|S|4|3|0|0|K|C|X|E|0|0|3|6|0|1C|E|0|0|0|0|8|C|L|E|0|0|0^^$0|@$1|2|3|4|5|6|7|1B|8|@$9|1C|A|1D|B|C]|$9|1E|A|1F|B|D]]|E|@$9|1G|A|1H|1|1I]]|F|$]]|$1|G|3|H|5|6|7|1J|8|@$9|1K|A|1L|B|C]|$9|1M|A|1N|B|C]]|E|@]|F|$]]|$1|I|3|J|5|K|7|1O|8|@]|E|@]|F|$L|M]]|$1|N|3|O|5|6|7|1P|8|@$9|1Q|A|1R|B|C]]|E|@]|F|$]]|$1|P|3|Q|5|6|7|1S|8|@$9|1T|A|1U|B|C]]|E|@]|F|$]]|$1|R|3|S|5|K|7|1V|8|@]|E|@]|F|$L|M]]|$1|T|3|U|5|6|7|1W|8|@]|E|@]|F|$]]|$1|V|3|W|5|K|7|1X|8|@]|E|@]|F|$L|M]]|$1|X|3|Y|5|6|7|1Y|8|@$9|1Z|A|20|B|C]|$9|21|A|22|B|C]]|E|@]|F|$]]|$1|Z|3|10|5|K|7|23|8|@]|E|@]|F|$L|M]]|$1|11|3|12|5|6|7|24|8|@]|E|@]|F|$]]|$1|13|3|-4|5|6|7|25|8|@]|E|@]|F|$]]]|14|$15|$5|16|17|18|F|$19|1A]]]]

I just provide a little tuning to the solution by <a href="https://stackoverflow.com/users/203773">tfe</a>. In particular, I added some additional control to ensure that there is no shifting of the page content (aka page shift) when the scrollbar is set to <code>hidden</code>.

Two Javascript functions <code>lockScroll()</code> and <code>unlockScroll()</code> can be defined, respectively, to lock and unlock the page scroll.

<pre><code>function lockScroll(){
 $html = $('html'); 
 $body = $('body'); 
 var initWidth = $body.outerWidth();
 var initHeight = $body.outerHeight();

 var scrollPosition = [
 self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
 self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
 ];
 $html.data('scroll-position', scrollPosition);
 $html.data('previous-overflow', $html.css('overflow'));
 $html.css('overflow', 'hidden');
 window.scrollTo(scrollPosition[0], scrollPosition[1]); 

 var marginR = $body.outerWidth()-initWidth;
 var marginB = $body.outerHeight()-initHeight; 
 $body.css({'margin-right': marginR,'margin-bottom': marginB});
} 

function unlockScroll(){
 $html = $('html');
 $body = $('body');
 $html.css('overflow', $html.data('previous-overflow'));
 var scrollPosition = $html.data('scroll-position');
 window.scrollTo(scrollPosition[0], scrollPosition[1]); 

 $body.css({'margin-right': 0, 'margin-bottom': 0});
}
</code></pre>

where I assumed that the <code>&lt;body&gt;</code> has no initial margin.

Notice that, while the above solution works in most of the practical cases, it is not definitive since it needs some further customization for pages that include, for instance, an header with <code>position:fixed</code>. Let's go into this special case with an example. Suppose to have

<pre><code>&lt;body&gt;
&lt;div id="header"&gt;My fixedheader&lt;/div&gt;
&lt;!--- OTHER CONTENT --&gt;
&lt;/body&gt;
</code></pre>

with 

<pre><code>#header{position:fixed; padding:0; margin:0; width:100%}
</code></pre>

Then, one should add the following in functions <code>lockScroll()</code> and <code>unlockScroll()</code>:

<pre><code>function lockScroll(){
 //Omissis 


 $('#header').css('margin-right', marginR);
} 

function unlockScroll(){
 //Omissis 

 $('#header').css('margin-right', 0);
}
</code></pre>

Finally, take care of some possible initial value for the margins or paddings.

blocks|key|295202|text|对于那些有居中布局的人(通过margin:0+auto;)，这里是position:fixed解决方案和@tfe提出的解决方案的混合。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|BOLD|entityRanges|data|295203|如果您遇到页面对齐(由于滚动条显示/隐藏)，请使用此解决方案。|295204|//+lock+scroll+position,+but+retain+settings+for+later
var+scrollPosition+=+[
++++window.pageXOffset+%7C%7C+document.documentElement.scrollLeft+%7C%7C+document.body.scrollLeft,
++++window.pageYOffset+%7C%7C+document.documentElement.scrollTop++%7C%7C+document.body.scrollTop
];
var+$html+=+$('html');+//+bow+to+the+demon+known+as+MSIE(v7)
$html.addClass('modal-noscroll');
$html.data('scroll-position',+scrollPosition);
$html.data('margin-top',+$html.css('margin-top'));
$html.css('margin-top',+-1+*+scrollPosition[1]);|code-block|syntax|javascript|295205|…与…结合使用|295206|//+un-lock+scroll+position
var+$html+=+$('html').removeClass('modal-noscroll');
var+scrollPosition+=+$html.data('scroll-position');
var+marginTop+=+$html.data('margin-top');
$html.css('margin-top',+marginTop);
window.scrollTo(scrollPosition[0],+scrollPosition[1])|295207|…最后是用于.modal-noscroll…的CSS。|295208|.modal-noscroll
{
++++position:+fixed;
++++overflow-y:+scroll;
++++width:+100%25;
}|295209|我敢说，这是一个比任何其他解决方案更合适的解决方案，但我还没有对它进行彻底的测试，…:P|295210|295211|编辑:请注意，我不知道这可能会在触摸设备上表现得有多糟糕(阅读:放大)。|295212|entityMap^0|E|E|X|E|1G|4|0|0|0|0|0|6|F|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]|$9|15|A|16|B|C]|$9|17|A|18|B|D]]|E|@]|F|$]]|$1|G|3|H|5|6|7|19|8|@]|E|@]|F|$]]|$1|I|3|J|5|K|7|1A|8|@]|E|@]|F|$L|M]]|$1|N|3|O|5|6|7|1B|8|@]|E|@]|F|$]]|$1|P|3|Q|5|K|7|1C|8|@]|E|@]|F|$L|M]]|$1|R|3|S|5|6|7|1D|8|@$9|1E|A|1F|B|C]]|E|@]|F|$]]|$1|T|3|U|5|K|7|1G|8|@]|E|@]|F|$L|M]]|$1|V|3|W|5|6|7|1H|8|@]|E|@]|F|$]]|$1|X|3|-4|5|6|7|1I|8|@]|E|@]|F|$]]|$1|Y|3|Z|5|6|7|1J|8|@]|E|@]|F|$]]|$1|10|3|-4|5|6|7|1K|8|@]|E|@]|F|$]]]|11|$]]

For folks who have centered layouts (via <code>margin:0 auto;</code>), here's a mash-up of the <code>position:fixed</code> solution along with @tfe's proposed solution.

Use this solution if you're experiencing page-snapping (due to the scrollbar showing/hiding).

<pre><code>// lock scroll position, but retain settings for later
var scrollPosition = [
 window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
 window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
];
var $html = $('html'); // bow to the demon known as MSIE(v7)
$html.addClass('modal-noscroll');
$html.data('scroll-position', scrollPosition);
$html.data('margin-top', $html.css('margin-top'));
$html.css('margin-top', -1 * scrollPosition[1]);
</code></pre>

…combined with…

<pre><code>// un-lock scroll position
var $html = $('html').removeClass('modal-noscroll');
var scrollPosition = $html.data('scroll-position');
var marginTop = $html.data('margin-top');
$html.css('margin-top', marginTop);
window.scrollTo(scrollPosition[0], scrollPosition[1])
</code></pre>

…and finally, the CSS for <code>.modal-noscroll</code>…

<pre><code>.modal-noscroll
{
 position: fixed;
 overflow-y: scroll;
 width: 100%;
}
</code></pre>

I would venture to say this is more of a proper fix than any of the other solutions out there, but I haven't tested it that thoroughly yet… :P

<hr>

Edit: please note that I have no clue how badly this might perform (read: blow up) on a touch device.

blocks|key|300370|text|这将完全禁用滚动：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|300371|$('html,+body').css({
++++overflow:+'hidden',
++++height:+'100%25'
});|code-block|syntax|javascript|300372|要恢复，请执行以下操作：|300373|$('html,+body').css({
++++overflow:+'auto',
++++height:+'auto'
});|300374|在Firefox和Chrome上进行了测试。|300375|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

This will completely disable scrolling:

<pre><code>$('html, body').css({
 overflow: 'hidden',
 height: '100%'
});
</code></pre>

To restore:

<pre><code>$('html, body').css({
 overflow: 'auto',
 height: 'auto'
});
</code></pre>

Tested it on Firefox and Chrome.

blocks|key|3023754|text|您也可以使用DOM来完成此操作。假设你有一个函数，你可以这样调用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3023755|function+disable_scroll()+{
document.body.style.overflow="hidden";
}|code-block|syntax|javascript|3023756|这就是它的全部！希望这对所有其他答案都有帮助！|3023757|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|$]]

You can also use DOM to do so. Say you have a function you call like this:

<pre><code>function disable_scroll() {
document.body.style.overflow="hidden";
}
</code></pre>

And that's all there is to it! Hope this helps in addition to all the other answers!

blocks|key|298277|text|尝尝这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|298278|$('#element').on('scroll+touchmove+mousewheel',+function(e){
++e.preventDefault();
++e.stopPropagation();
++return+false;
})|code-block|syntax|javascript|298279|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

try this

<pre><code>$('#element').on('scroll touchmove mousewheel', function(e){
 e.preventDefault();
 e.stopPropagation();
 return false;
})
</code></pre>

blocks|key|295237|text|这就是我最终要做的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|295238|CoffeeScript：|295239|++++$("input").focus+->
++++++++$("html,+body").css+"overflow-y","hidden"
++++++++$(document).on+"scroll.stopped+touchmove.stopped+mousewheel.stopped",+(event)+->
++++++++++++event.preventDefault()

++++$("input").blur+->
++++++++$("html,+body").css+"overflow-y","auto"
++++++++$(document).off+"scroll.stopped+touchmove.stopped+mousewheel.stopped"|code-block|syntax|javascript|295240|Javascript：|295241|$("input").focus(function()+{
+$("html,+body").css("overflow-y",+"hidden");
+$(document).on("scroll.stopped+touchmove.stopped+mousewheel.stopped",+function(event)+{
+++return+event.preventDefault();
+});
});

$("input").blur(function()+{
+$("html,+body").css("overflow-y",+"auto");
+$(document).off("scroll.stopped+touchmove.stopped+mousewheel.stopped");
});|295242|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

This is what I ended up doing:

CoffeeScript:

<pre><code> $("input").focus -&gt;
 $("html, body").css "overflow-y","hidden"
 $(document).on "scroll.stopped touchmove.stopped mousewheel.stopped", (event) -&gt;
 event.preventDefault()

 $("input").blur -&gt;
 $("html, body").css "overflow-y","auto"
 $(document).off "scroll.stopped touchmove.stopped mousewheel.stopped"
</code></pre>

Javascript:

<pre><code>$("input").focus(function() {
 $("html, body").css("overflow-y", "hidden");
 $(document).on("scroll.stopped touchmove.stopped mousewheel.stopped", function(event) {
 return event.preventDefault();
 });
});

$("input").blur(function() {
 $("html, body").css("overflow-y", "auto");
 $(document).off("scroll.stopped touchmove.stopped mousewheel.stopped");
});
</code></pre>

blocks|key|3023842|text|不确定是否有人尝试过我的解决方案。这个方法适用于整个body/html，但毫无疑问，它可以应用于任何触发scroll事件的元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3023843|只需根据需要设置和取消设置scrollLock。|3023844|var+scrollLock+=+false;
var+scrollMem+=+{left:+0,+top:+0};

$(window).scroll(function(){
++++if+(scrollLock)+{
++++++++window.scrollTo(scrollMem.left,+scrollMem.top);
++++}+else+{
++++++++scrollMem+=+{
++++++++++++left:+self.pageXOffset+%7C%7C+document.documentElement.scrollLeft+%7C%7C+document.body.scrollLeft,
++++++++++++top:+self.pageYOffset+%7C%7C+document.documentElement.scrollTop+%7C%7C+document.body.scrollTop
++++++++};
++++}
});|code-block|syntax|javascript|3023845|下面是示例JSFiddle|offset|length|3023846|希望这篇文章能帮助一些人。|3023847|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/3uzm831k/2/^0|0|0|0|5|8|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$K|10|L|11|1|12]]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

Not sure if anybody has tried out my solution. This one works on the whole body/html but no doubt it can be applied to any element that fires a scroll event.

Just set and unset scrollLock as you need.

<pre><code>var scrollLock = false;
var scrollMem = {left: 0, top: 0};

$(window).scroll(function(){
 if (scrollLock) {
 window.scrollTo(scrollMem.left, scrollMem.top);
 } else {
 scrollMem = {
 left: self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
 top: self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
 };
 }
});
</code></pre>

Here's the example <a href="http://jsfiddle.net/3uzm831k/2/" rel="nofollow">JSFiddle</a>

Hope this one helps somebody.

blocks|key|297797|text|要关闭滚动功能，请尝试执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|297798|var+current+=+$(window).scrollTop();
$(window).scroll(function()+{
++++$(window).scrollTop(current);
});|code-block|syntax|javascript|297799|要重置，请执行以下操作：|297800|$(window).off('scroll');|297801|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

To turn OFF scrolling try this:

<pre><code>var current = $(window).scrollTop();
$(window).scroll(function() {
 $(window).scrollTop(current);
});
</code></pre>

to reset:

<pre><code>$(window).off('scroll');
</code></pre>

blocks|key|298318|text|一个用于禁用滚动的线条，包括鼠标中键。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|298319|$(document).scroll(function+()+{+$(document).scrollTop(0);+});|code-block|syntax|javascript|298320|编辑：无论如何都不需要jQuery，下面和上面在vanilla+JS中一样(这意味着没有框架，只有JavaScript)：|offset|length|style|BOLD|298321|document.addEventListener('scroll',+function+()+{+this.documentElement.scrollTop+=+0;+this.body.scrollTop+=+0;+})|298322|this.documentElement.scrollTop+-标准|298323|this.body.scrollTop+-+IE兼容性|298324|entityMap^0|0|0|0|2|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@$I|X|J|Y|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

One liner to disable scrolling including middle mouse button.

<pre><code>$(document).scroll(function () { $(document).scrollTop(0); });
</code></pre>

edit: There's no need for jQuery anyway, below same as above in vanilla JS(that means no frameworks, just JavaScript):

<pre><code>document.addEventListener('scroll', function () { this.documentElement.scrollTop = 0; this.body.scrollTop = 0; })
</code></pre>

this.documentElement.scrollTop - standard

this.body.scrollTop - IE compatibility

blocks|key|298332|text|如果只想禁用键盘导航滚动，可以重写keydown事件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|298333|$(document).on('keydown',+function(e){
++++e.preventDefault();
++++e.stopPropagation();
});|code-block|syntax|javascript|298334|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you just want to disable scrolling with keyboard navigation, you can override keydown event.

<pre><code>$(document).on('keydown', function(e){
 e.preventDefault();
 e.stopPropagation();
});
</code></pre>

blocks|key|3024042|text|有人发布了此代码，该代码存在恢复时无法保留滚动位置的问题。原因是人们倾向于将其应用于html和body，或者仅应用于body，但它应该仅应用于html。这样，恢复时滚动位置将保持不变：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3024043|$('html').css({
++++'overflow':+'hidden',
++++'height':+'100%25'
});|code-block|syntax|javascript|3024044|要恢复，请执行以下操作：|3024045|$('html').css({
++++'overflow':+'auto',
++++'height':+'auto'
});|3024046|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Somebody posted this code, which has the problem of not retaining the scroll position when restored. The reason is that people tend to apply it to html and body or just the body but it should be applied to html only. This way when restored the scroll position will be kept:

<pre><code>$('html').css({
 'overflow': 'hidden',
 'height': '100%'
});
</code></pre>

To restore:

<pre><code>$('html').css({
 'overflow': 'auto',
 'height': 'auto'
});
</code></pre>

blocks|key|297866|text|您可以附加一个函数来滚动事件并阻止其默认行为。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|297867|var+$window+=+$(window);

$window.on("mousewheel+DOMMouseScroll",+onMouseWheel);

function+onMouseWheel(e)+{
++++e.preventDefault();
}|code-block|syntax|javascript|297868|https://jsfiddle.net/22cLw9em/|offset|length|297869|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|U|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

You can attach a function to scroll events and prevent its default behaviour.

<pre><code>var $window = $(window);

$window.on("mousewheel DOMMouseScroll", onMouseWheel);

function onMouseWheel(e) {
 e.preventDefault();
}
</code></pre>

<a href="https://jsfiddle.net/22cLw9em/" rel="noreferrer">https://jsfiddle.net/22cLw9em/</a>

blocks|key|3024094|text|尝试以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3024095|++++$(function()+{+
++++++++//+...

++++++++var+$body+=+$(document);
++++++++$body.bind('scroll',+function()+{
++++++++++++if+($body.scrollLeft()+!==+0)+{
++++++++++++++++$body.scrollLeft(0);
++++++++++++}
++++++++});

++++++++//+...
++++});|code-block|syntax|javascript|3024096|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try this code:

<pre><code> $(function() { 
 // ...

 var $body = $(document);
 $body.bind('scroll', function() {
 if ($body.scrollLeft() !== 0) {
 $body.scrollLeft(0);
 }
 });

 // ...
 });
</code></pre>

blocks|key|3024118|text|隐藏卷轴：$("body").css("overflow",+"hidden");|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3024119|To还原卷轴：$("body").css("overflow",+"initial");|unordered-list-item|3024120|
的|3024121|3024122|3024123|entityMap^0|5|10|0|7|11|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|I|3|J|5|6|7|U|8|@]|D|@]|E|$]]|$1|K|3|-4|5|H|7|V|8|@]|D|@]|E|$]]|$1|L|3|-4|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

<ul>
<li>To Hide Scroll: <code>$("body").css("overflow", "hidden");</code></li>
<li>To Restore Scroll: <code>$("body").css("overflow", "initial");</code></li>
</ul>

blocks|key|3238487|text|我认为最好的和干净的解决方案是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3238488|window.addEventListener('scroll',()+=>+{
++++var+x+=+window.scrollX;
++++var+y+=+window.scrollY;
++++window.scrollTo(x,y);
});|code-block|syntax|javascript|3238489|使用jQuery：|3238490|$(window).on('scroll',()+=>+{
++++var+x+=+window.scrollX;
++++var+y+=+window.scrollY;
++++window.scrollTo(x,y)
})|3238491|这些事件侦听器应该阻止滚动。只需移除它们即可重新启用滚动功能|3238492|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I think the best and clean solution is:

<pre><code>window.addEventListener('scroll',() =&gt; {
 var x = window.scrollX;
 var y = window.scrollY;
 window.scrollTo(x,y);
});
</code></pre>

And with jQuery:

<pre><code>$(window).on('scroll',() =&gt; {
 var x = window.scrollX;
 var y = window.scrollY;
 window.scrollTo(x,y)
})
</code></pre>

Those event listener should block scrolling.
Just remove them to re enable scrolling

blocks|key|298400|text|我正在使用以下代码禁用滚动，它工作得很好|type|unstyled|depth|inlineStyleRanges|entityRanges|data|298401|++++$('html').css({
++++++'overflow':+'hidden',
++++++'height':+'100%25'
++++});|code-block|syntax|javascript|298402|除了在我的android平板电脑上，url地址栏和顶部窗口标签仍然可见，当用户上下滚动时，窗口也会上下滚动约40px，并显示/隐藏url栏和标签。有没有办法防止这种情况，并完全禁用滚动功能？|298403|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 am using the following code to disable scrolling and it works fine
<pre><code> $('html').css({
 'overflow': 'hidden',
 'height': '100%'
 });
</code></pre>
except that on my android tablet, url address bar and top window tags remain visible, and when users scroll up and down, the window also scrolls for about 40px up and down, and shows/hides the url bar and the tags.
Is there a way to prevent that and have scrolling fully disabled ?

blocks|key|297903|text|如果想要以编程方式禁用滚动，您可以使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|297904|overflow:+clip;|code-block|syntax|javascript|297905|如果您想要禁用用户的滚动，您可以使用：|297906|overflow:+hidden;|297907|https://developer.mozilla.org/en-US/docs/Web/CSS/overflow|offset|length|297908|浏览器对overflow属性的支持各不相同：|style|BOLD|297909|https://caniuse.com/?search=overflow|297910|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|0|0|0|1L|0|0|4|8|0|0|10|1|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|14|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|16|8|@]|9|@$M|17|N|18|1|19]]|A|$]]|$1|O|3|P|5|6|7|1A|8|@$M|1B|N|1C|Q|R]]|9|@]|A|$]]|$1|S|3|T|5|6|7|1D|8|@]|9|@$M|1E|N|1F|1|1G]]|A|$]]|$1|U|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|L]]|11|$5|X|Y|Z|A|$10|T]]]]

If want to programmatically disable scrolling you can use:
<pre><code>overflow: clip;
</code></pre>
If you wanted to disable scrolling for the user you can use:
<pre><code>overflow: hidden;
</code></pre>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/overflow</a>
The browser support for the overflow property varies:
<a href="https://caniuse.com/?search=overflow" rel="nofollow noreferrer">https://caniuse.com/?search=overflow</a>

Using jQuery, I would like to disable scrolling of the body:

My idea is to:

<ol>
<li>Set <code>body{ overflow: hidden;}</code> </li>
<li>Capture the current <code>scrollTop();/scrollLeft()</code> </li>
<li>Bind to the body scroll event, set scrollTop/scrollLeft to the captured value.</li>
</ol>

Is there a better way?

<hr>

Update:

Please see my example, and a reason why, at <a href="http://jsbin.com/ikuma4/2/edit" rel="noreferrer">http://jsbin.com/ikuma4/2/edit</a>

I am aware someone will be thinking "why does he not just use <code>position: fixed</code> on the panel?".

Please do not suggest this as I have other reasons.

How to programmatically disable page scrolling with jQuery

jQuery

使用jQuery，我想禁用滚动正文：我的想法是：Set body{ overflow: hidden;} Capture当前scrollTop();/scrollLeft() 绑定到body scroll事件，将scrollTop/scrollLeft设置为捕获值。有没有更好的方法？更新：请在上查看我的示例以及原因我知...

问如何使用jQuery以编程方式禁用页面滚动
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jQuery以编程方式禁用页面滚动EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jQuery以编程方式禁用页面滚动
EN