禁用浏览器垂直和水平滚动条答案

【问题标题】：Disable browsers vertical and horizontal scrollbars禁用浏览器垂直和水平滚动条
【发布时间】：2010-09-19 13:08:29
【问题描述】：

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

【问题讨论】：

我认为在某些情况下，特别是如果你想在滚动和不滚动之间切换，这个解决方案更可取：stackoverflow.com/questions/8701754/…
你可以在这里找到更完整的答案stackoverflow.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');

【讨论】：