blocks|key|1705327|text|如果您需要动态隐藏和显示滚动条，您可以使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1705328|$("body").css("overflow",+"hidden");|code-block|syntax|javascript|1705329|和|1705330|$("body").css("overflow",+"auto");|1705331|在你的代码中的某个地方。|1705332|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|$]]

In case you need possibility to hide and show scrollbars dynamically you could use

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

and

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

somewhere in your code.

blocks|key|1705441|text|function+reloadScrollBars()+{
++++document.documentElement.style.overflow+=+'auto';++//+firefox,+chrome
++++document.body.scroll+=+"yes";+//+ie+only
}

function+unloadScrollBars()+{
++++document.documentElement.style.overflow+=+'hidden';++//+firefox,+chrome
++++document.body.scroll+=+"no";+//+ie+only
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1705442|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>function reloadScrollBars() {
 document.documentElement.style.overflow = 'auto'; // firefox, chrome
 document.body.scroll = "yes"; // ie only
}

function unloadScrollBars() {
 document.documentElement.style.overflow = 'hidden'; // firefox, chrome
 document.body.scroll = "no"; // ie only
}
</code></pre>

blocks|key|1705268|text|尝试CSS|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1705269|<body+style="overflow:+hidden">|code-block|syntax|javascript|1705270|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 CSS

<pre><code>&lt;body style="overflow: hidden"&gt;
</code></pre>

blocks|key|1490323|text|到目前为止，我们已经溢出了:隐藏在主体上。然而，IE并不总是遵守这一点，您需要在body元素上设置scroll="no“，并且/或者在html元素上也放置overflow:hidden。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1490324|当你需要“控制”视窗时，你可以进一步这样做：-|1490325|<style>
+body+{width:100%25;+height:100%25;+overflow:hidden;+margin:0;+}
+html+{width:100%25;+height:100%25;+overflow:hidden;+}
</style>|code-block|syntax|javascript|1490326|在主体中被赋予高度100%25的元素具有窗口视口的完整高度，并且使用bottom:nnPX绝对定位的元素将被设置为窗口底部边缘以上的nn像素，依此类推。|1490327|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

So far we have overflow:hidden on the body. However IE doesn't always honor that and you need to put scroll="no" on the body element as well and/or place overflow:hidden on the html element as well.

You can take this further when you need to 'take control' of the view port you can do this:-

<pre><code>&lt;style&gt;
 body {width:100%; height:100%; overflow:hidden; margin:0; }
 html {width:100%; height:100%; overflow:hidden; }
&lt;/style&gt;
</code></pre>

An element granted height 100% in the body has the full height of the window viewport, and element positioned absolutely using bottom:nnPX will be set nn pixels above the bottom edge of the window, etc.

blocks|key|1490349|text|试试CSS吧。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1490350|如果您想要删除水平|1490351|overflow-x:+hidden;|code-block|syntax|javascript|1490352|如果您想要删除垂直|1490353|overflow-y:+hidden;|1490354|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|$]]

Try CSS.

If you want to remove Horizontal

<pre><code>overflow-x: hidden;
</code></pre>

And if you want to remove Vertical

<pre><code>overflow-y: hidden;
</code></pre>

blocks|key|1490560|text|在IE的现代版本(IE10及更高版本)中，可以使用-ms-overflow-style+property隐藏滚动条。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1490561|html+{
+++++-ms-overflow-style:+none;
}|code-block|syntax|javascript|1490562|在Chrome中，可以设置滚动条的样式：|1490563|::-webkit-scrollbar+{
++++display:+none;
}|1490564|如果你想在web应用程序中使用“默认”的正文滚动，这是非常有用的，它比overflow-y:+scroll快得多。|1490565|entityMap|0|LINK|mutability|MUTABLE|url|http://msdn.microsoft.com/en-us/library/ie/hh771902(v=vs.85).aspx)^0|P|I|P|R|0|0|0|0|0|Z|I|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]]|E|$]]|$1|F|3|G|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|15|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|16|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|17|8|@$9|18|A|19|B|C]]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

In modern versions of IE (IE10 and above), scrollbars can be hidden using the <a href="http://msdn.microsoft.com/en-us/library/ie/hh771902(v=vs.85).aspx" rel="noreferrer"><code>-ms-overflow-style</code> property</a>.

<pre><code>html {
 -ms-overflow-style: none;
}
</code></pre>

In Chrome, scrollbars can be styled:

<pre><code>::-webkit-scrollbar {
 display: none;
}
</code></pre>

This is very useful if you want to use the 'default' body scrolling in a web application, which is considerably faster than <code>overflow-y: scroll</code>.

blocks|key|1490432|text|IE的滚动条有一些bug。因此，如果您想要这两者中的任何一个，则必须包括以下内容以隐藏水平滚动条：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1490433|overflow-x:+hidden;|offset|length|style|CODE|1490434|overflow-y:scroll;|1490435|和隐藏垂直方向：|1490436|overflow-y:+hidden;|1490437|overflow-x:+scroll;|1490438|entityMap^0|0|0|J|0|0|I|0|0|0|J|0|0|J|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@$D|T|E|U|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|V|8|@$D|W|E|X|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|Y|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|Z|8|@$D|10|E|11|F|G]]|9|@]|A|$]]|$1|N|3|O|5|6|7|12|8|@$D|13|E|14|F|G]]|9|@]|A|$]]|$1|P|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|Q|$]]

IE has some bug with the scrollbars. So if you want either of the two, you must include the following to hide the horizontal scrollbar:

<code>overflow-x: hidden;</code> 
<code>overflow-y:scroll;</code>

and to hide vertical:

<code>overflow-y: hidden;</code> 
<code>overflow-x: scroll;</code>

blocks|key|1705679|text|(我还不能发表评论，但想分享这一点)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1705680|Lyncee的代码在桌面浏览器中对我有效。然而，在iPad+(Chrome，iOS+9)上，它使应用程序崩溃。为了修复它，我改变了|1705681|document.documentElement.style.overflow+=+...|code-block|syntax|javascript|1705682|至|1705683|document.body.style.overflow+=+...|1705684|这解决了我的问题。|1705685|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

(I can't comment yet, but wanted to share this):

Lyncee's code worked for me in desktop browser. However, on iPad (Chrome, iOS 9), it crashed the application. To fix it, I changed 

<pre><code>document.documentElement.style.overflow = ...
</code></pre>

to

<pre><code>document.body.style.overflow = ...
</code></pre>

which solved my problem.

blocks|key|1490494|text|因为Firefox有一个箭头键快捷方式，所以您可能希望在它周围放置一个CSS+<div>：overflow:hidden;样式。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1490495|entityMap^0|13|5|19|G|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

Because Firefox has an arrow key short cut, you probably want to put a <code>&lt;div&gt;</code> around it with CSS style: <code>overflow:hidden;</code>.

blocks|key|1705711|text|使用JQuery，您可以使用以下代码禁用滚动条：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1705712|$('body').on({
++++'mousewheel':+function(e)+{
++++++++if+(e.target.id+==+'el')+return;
++++++++e.preventDefault();
++++++++e.stopPropagation();
+++++}
});|code-block|syntax|javascript|1705713|您还可以使用以下代码再次启用它：|1705714|+$('body').unbind('mousewheel');|1705715|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|$]]

Using JQuery you can disable scrolling bar with this code : 

<pre><code>$('body').on({
 'mousewheel': function(e) {
 if (e.target.id == 'el') return;
 e.preventDefault();
 e.stopPropagation();
 }
});
</code></pre>

Also you can enable it again with this code :

<pre><code> $('body').unbind('mousewheel');
</code></pre>

Is it possible to disable the browsers vertical and horizontal scrollbars using jQuery or javascript?

Disable browsers vertical and horizontal scrollbars

jQuery

是否可以使用jQuery或javascript禁用浏览器的垂直和水平滚动条？

问禁用浏览器的垂直和水平滚动条
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问禁用浏览器的垂直和水平滚动条EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问禁用浏览器的垂直和水平滚动条
EN