如何禁用页面的滚动条？

Question

9

如何禁用页面的滚动条。

并禁用此按钮。

- faressoft

10

从UI的角度看，我非常不喜欢这个问题。如果在您的网页中我无法使用鼠标滚轮滚动，我将成为非常沮丧的用户。您能解释一下为什么要这样做吗？ - Chris

可能出现的问题：小屏幕/视口（并非每个显示设备都有20480x5000像素，尤其是移动设备；而且并不是每个人都使用最大化的浏览器窗口）将无法显示滚动条或您内容的相关部分；此外，如果没有启用JS（例如NoScript），会发生什么？ - Piskvor left the building

1

如果您移除滚动条，那么滚轮问题就会消失，对吧？ - gawi

7个回答

7

您无法禁用该按钮（或任何其他滚动页面的方法）; 请参见此处。但是，您可以在检测到滚动时随时使用scrollTo（0,0）。这可能看起来很丑陋（页面稍微滚动一下，然后跳回顶部）。

要禁用滚动条，可以尝试设置html，body {overflow：hidden};我认为某些浏览器可能不会遵守此规则。

（创建适合视口的页面，以便不显示滚动条，这样不是更好吗？）

- Piskvor left the building

6

$(window).scroll(function() {
    scroll(0,0);
});

如果您想使用它，您需要导入jQuery。

- faressoft

2

这就是jQuery吗？你可能想把它加为一个标签。 - palswim

为什么要导入完整的远程库来获取通过纯JavaScript和CSS本地可用的东西？ - Blue_Hat

1

我正在制作一个移动网站，但我不希望它是一堆网页，所以我正在将其制作为一个页面，并禁用滚动。我使用了以下方法：

   <style>
   html, body {
   overflow: hidden;
   }
   </style>

- Tristen

1

你的回答是否改进了任何现有的回答？这是一个特定的用例吗？ - emecas

1

这将移除您的滚动条。[我是无意中做的]

@media screen{        
body>div#header{        
position:fixed;        
}        
body>div#footer{        
position:fixed;        
} `

- Warren

1

document.body.scroll = "no";
document.body.style.overflow = 'hidden';
document.height = window.innerHeight;

应该在大多数浏览器中禁用滚动条。

- Adam

@faresoft，你尝试了这些方法后仍然看到滚动条吗？ - Adam

0

这个方法是有效的： * {overflow: hidden} 但是我在尝试时遇到了一个问题，我的页面上有一个CSS下拉菜单（或者说是滑动菜单），当我使用这种方法时它不会显示。我仍在努力寻找如何使下拉菜单与此启用的方法兼容。

- Blue_Hat

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

可以查看英文原文，
原文链接

- palswim · Accepted Answer

滚动条是一个CSS问题。您可以将以下代码添加到您的页面（或内部部分添加到CSS文件中）：

overflow: auto;

<style type="text/css">
html, body {
  overflow: hidden;
}
</style>