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

Question

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

javascriptjquery

119

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

- naveen

我认为在某些情况下，特别是需要在滚动和不滚动之间切换时，此解决方案更可取：https://dev59.com/P2oy5IYBdhLWcg3wN7YX - Yousef Salimpour

您可以在此处找到这个问题的更完整答案：https://dev59.com/u3A75IYBdhLWcg3wbojM#25561646 - davidcondrey

11个回答

阿里云服务器只需要99元/年，新老用户同享，点击查看详情

133

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
}

- Lyncee

6

两个赞对于唯一的纯JavaScript答案来说实在太少了。 - john-jones

2

@HermannIngjaldsson：看到 OP 4 年前要求 JavaScript 或 jQuery 解决方案并接受了一个 jQuery 解决方案，这是很有道理的。我不是说答案不好，只是在说明低票数的显而易见的问题。无论如何，我给它点赞。 - Nope

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

这是一个非常出色的解决方案，值得点赞。它还解决了固定CSS的问题，使页面可以滚动到顶部。 - haipham23

50

尝试使用CSS

<body style="overflow: hidden">

- CodeMeIt

15

为了浏览器兼容性，我建议将以下样式添加到HTML标签中：html, body {overflow:hidden;} （说明：该样式用于隐藏网页滚动条，以确保在不同的浏览器上都能正常显示。） - Ady

31

到目前为止，我们在body元素上使用了overflow:hidden。然而，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像素的位置，等等。

- AnthonyWJones

2

在 body 的 CSS 中，逗号不应该是分号吗？ - paynestrike

12

尝试使用CSS。

如果您想要去除水平方向的内容

overflow-x: hidden;

如果您想要移除垂直方向

overflow-y: hidden;

- shafraz

10

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

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

在Chrome中，可以样式化滚动条：

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

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

- Lg102

只有这个答案对我有效 :) 谢谢！ - Gediminas Šukys

8

如果您还需要支持Internet Explorer 6，只需溢出html即可。

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

并且

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

- Gawin

5

IE存在一些滚动条的bug。如果你想要其中两个，你必须包括以下内容以隐藏水平滚动条：

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

而为了隐藏垂直滚动条：

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

- Zeeshan Ali

4

（我还不能发表评论，但我想分享这个）：

Lyncee的代码在我的桌面浏览器上运行良好。然而，在iPad上（Chrome，iOS 9），它会使应用程序崩溃。为了解决这个问题，我进行了更改。

document.documentElement.style.overflow = ...

为了

document.body.style.overflow = ...

这解决了我的问题。

- Erasmus Cedernaes

2

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

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

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

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

- gtzinos

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，

- Alexander Prokofyev · Accepted Answer

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

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

和

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

在您的代码中的某个地方。