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

117

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

javascript jquery

— 纳文
source

我认为，在某些情况下，特别是如果你想SCROLL和该解决方案更优选之间切换：stackoverflow.com/questions/8701754/...

— 优素福Salimpour

您可以在此处找到此问题的更完整答案stackoverflow.com/a/25561646/1922144

— davidcondrey 2014年

144

如果需要动态隐藏和显示滚动条，可以使用

$("body").css("overflow", "hidden");

和

$("body").css("overflow", "auto");

您代码中的某处。

— 亚历山大·普罗科菲耶夫（Alexander Prokofyev）
source

4

隐藏的溢出并不总是在IE中起作用。请参阅下面的AnthonyWJones答案。

— Tiago Almeida

4

oveflow: hidden不会阻止智能手机上的任何东西。

— 2014年

在Chrome浏览器中，这会禁用滚动条而不将其隐藏（它仍然存在并且仍在更改其他所有内容的大小，但现在显示为灰色）

— taltamir

120

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
}

— 林斯
source

5

仅有两个纯正的javascript答案，所以很少有两个投票。

— Fzs2

2

@HermannIngjaldsson：看到OP要求JavaScript或jQuery解决方案，并在4年前接受了jQuery解决方案，这才有意义。我并不是说答案不是很好，只是说出了有关较低投票的显而易见的答案。无论如何都会向我+1。

— Nope

这是唯一对我有用的解决方案，因为主体隐藏的溢出不会攻击整个文档，所以这是解决此问题的正确方法！非常感谢，您为我节省了很多时间！

— Adnane.T 2014年

这是一个绝妙的解决方案，值得赞扬。它还解决了固定CSS的问题，该页面将滚动到顶部。

— haipham23

50

尝试CSS

<body style="overflow: hidden">

— 陆瑞
source

15

对于浏览器的兼容性我想补充这种风格的HTML标记，以及：HTML，身体{溢出：隐藏;}

— 安以轩

32

到目前为止，我们已经溢出：隐藏在身体上。但是IE并不总是很乐意这样做，您还需要在body元素上加上scroll =“ no”和/或在html元素上也要包含以下内容：hidden。

当您需要“控制”视口时，可以采取以下措施：

<style>
 body {width:100%; height:100%; overflow:hidden; margin:0; }
 html {width:100%; height:100%; overflow:hidden; }
</style>

主体中高度为100％的元素具有窗口视口的整个高度，并且绝对使用bottom：nnPX定位的元素将设置为窗口底部边缘上方nn像素，依此类推。

— 安东尼·琼斯
source

2

css中的'，'应该不是';'吗？

— paynestrike，2015年

12

试试CSS。

如果要删除水平

overflow-x: hidden;

如果要删除垂直

overflow-y: hidden;

— Shafraz
source

10

在IE的现代版本（IE10及更高版本）中，可以使用-ms-overflow-style属性隐藏滚动条。

html {
     -ms-overflow-style: none;
}

在Chrome中，可以设置滚动条的样式：

::-webkit-scrollbar {
    display: none;
}

如果您想在Web应用程序中使用“默认”正文滚动（这比快得多），则非常有用overflow-y: scroll。

— Lg102
source

从所有答案中只有这对我有用:)谢谢！

— Gediminas

9

如果您还需要对Internet Explorer 6的支持，只需溢出html

$("html").css("overflow", "hidden");

和

$("html").css("overflow", "auto");

— 加温
source

5

IE在滚动条上存在一些错误。因此，如果要使用两者之一，则必须包含以下内容以隐藏水平滚动条：

overflow-x: hidden;
overflow-y:scroll;

并隐藏垂直：

overflow-y: hidden;
overflow-x: scroll;

— Zeeshan Ali
source

4

（我无法发表评论，但想分享一下）：

Lyncee的代码在桌面浏览器中为我工作。但是，在iPad（Chrome，iOS 9）上，该应用程序崩溃了。为了解决它，我改变了

document.documentElement.style.overflow = ...

至

document.body.style.overflow = ...

解决了我的问题。

— Erasmus Cedernaes
source

2

由于Firefox具有快捷键，因此您可能希望<div>使用CSS样式：overflow:hidden;。

— 酷酷
source

2

使用JQuery，您可以使用以下代码禁用滚动条：

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

您也可以使用以下代码再次启用它：

 $('body').unbind('mousewheel');

— Gtzinos
source