禁用浏览器垂直和水平滚动条
Posted
技术标签:
【中文标题】禁用浏览器垂直和水平滚动条【英文标题】：Disable browsers vertical and horizontal scrollbars 【发布时间】：2010-09-19 13:08:29 【问题描述】：是否可以使用 jQuery 或 javascript 禁用浏览器的垂直和水平滚动条？
【问题讨论】：
我认为在某些情况下，特别是如果你想在滚动和不滚动之间切换，这个解决方案更可取：***.com/questions/8701754/… 你可以在这里找到更完整的答案***.com/a/25561646/1922144 【参考方案1】：如果您需要动态隐藏和显示滚动条，您可以使用
$("body").css("overflow", "hidden");
和
$("body").css("overflow", "auto");
在你的代码中。
【讨论】：
溢出隐藏在 IE 中并不总是有效。请参阅下面的 AnthonyWJones 答案。oveflow: hidden 不会阻止智能手机上的任何内容。
在 chrome 中，这会禁用滚动条而不隐藏它（它仍然存在并且仍在更改其他所有内容的大小，但现在它变灰了）【参考方案2】：
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
【讨论】：
作为唯一的纯 JavaScript 答案，两次赞成是非常少的。 @HermannIngjaldsson：看到 OP 要求 JavaScript 或 jQuery 解决方案并在 4 年前接受了 jQuery 解决方案，这才有意义。我并不是说答案不好，只是说明了较低票数的明显情况。无论如何，我要 +1。 这是唯一对我有用的解决方案，因为正文隐藏溢出不会攻击整个文档，这是解决此问题的正确解决方案！非常感谢，你为我节省了很多时间！ 这是一个绝妙的解决方案，值得点赞。它还解决了固定 css 的问题，页面将滚动到顶部。【参考方案3】：试试 CSS
<body style="overflow: hidden">
【讨论】：
为了浏览器兼容性，我也会将此样式添加到 html 标记中：html, body overflow:hidden;【参考方案4】：到目前为止，我们已经溢出：隐藏在身体上。但是 IE 并不总是尊重这一点，您还需要在 body 元素上放置 scroll="no" 和/或在 html 元素上放置 overflow:hidden。
当您需要“控制”视口时，您可以更进一步：-
<style>
body width:100%; height:100%; overflow:hidden; margin:0;
html width:100%; height:100%; overflow:hidden;
</style>
主体中高度为 100% 的元素具有窗口视口的完整高度，使用 bottom:nnPX 绝对定位的元素将设置为窗口底部边缘上方 nn 个像素，等等。
【讨论】：
在正文 css 中，',' 不应该是 ';' 吗？【参考方案5】：试试 CSS。
如果你想删除水平
overflow-x: hidden;
如果你想删除垂直
overflow-y: hidden;
【讨论】：
【参考方案6】：在现代版本的 IE（IE10 及更高版本）中，可以使用 -ms-overflow-style property 隐藏滚动条。
html
-ms-overflow-style: none;
在 Chrome 中，滚动条可以设置样式：
::-webkit-scrollbar
display: none;
如果您想在 Web 应用程序中使用“默认”正文滚动，这非常有用，它比 overflow-y: scroll 快得多。
【讨论】：
从所有答案中只有这对我有用:) 谢谢！【参考方案7】：如果您还需要支持 Internet Explorer 6，只需溢出 html
$("html").css("overflow", "hidden");
和
$("html").css("overflow", "auto");
【讨论】：
【参考方案8】：IE 的滚动条有一些错误。所以如果你想要两者中的任何一个，你必须包括以下内容来隐藏水平滚动条：
overflow-x: hidden;overflow-y:scroll;
并隐藏垂直：
overflow-y: hidden;overflow-x: scroll;
【讨论】：
【参考方案9】：（我还不能发表评论，但想分享一下）：
Lyncee 的代码在桌面浏览器中为我工作。但是，在 iPad（Chrome、ios 9）上，它使应用程序崩溃。为了修复它，我改变了
document.documentElement.style.overflow = ...
到
document.body.style.overflow = ...
解决了我的问题。
【讨论】：
【参考方案10】：因为 Firefox 有一个箭头键快捷方式，您可能想用 CSS 样式在其周围加上 <div>：overflow:hidden;。
【讨论】：
【参考方案11】：使用 JQuery，您可以使用以下代码禁用滚动条：
$('body').on(
'mousewheel': function(e)
if (e.target.id == 'el') return;
e.preventDefault();
e.stopPropagation();
);
您也可以使用此代码再次启用它：
$('body').unbind('mousewheel');
【讨论】：
以上是关于禁用浏览器垂直和水平滚动条的主要内容，如果未能解决你的问题，请参考以下文章