停用或移除 HTML 上的滚动条答案

【问题标题】：Deactivate or remove the scrollbar on HTML停用或移除 HTML 上的滚动条
【发布时间】：2011-03-03 08:09:57
【问题描述】：

我想停用或删除 HTML 页面中的垂直 scrollbar。
该怎么做？

谢谢。

【问题讨论】：

【解决方案1】：

在 HTML 中

<div style="overflow: hidden;">

在 CSS 中

overflow: hidden;

您也可以分别结束 x 或 y 的滚动

overflow-y: hidden; /* Hide vertical scrollbar */
  overflow-x: hidden; /* Hide horizontal scrollbar */

【讨论】：

【解决方案2】：

这使得如果之前有一个滚动条，那么它就会使滚动条显示为无，这样你就再也看不到它了。您可以将 html 替换为正文或类或 ID。希望它对你有用:)

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

【讨论】：

【解决方案3】：

Meder Omuraliev 建议使用事件处理程序并设置 scrollTo(0,0)。这是 Wassim-azirar 的一个例子。综上所述，我认为这是最终的解决方案。

我们有 3 个问题：滚动条、鼠标滚动和键盘。这隐藏了滚动条：

       html, body{overflow:hidden;}

不幸的是，您仍然可以使用键盘滚动：为了防止这种情况，我们可以：

    function keydownHandler(e) {
var evt = e ? e:event;
  var keyCode = evt.keyCode;

  if (keyCode==38 || keyCode==39 || keyCode==40 || keyCode==37){ //arrow keys
e.preventDefault()
scrollTo(0,0);
}
}

document.onkeydown=keydownHandler;

在这段代码之后，鼠标滚动自然就不起作用了，所以我们阻止了滚动。

例如：https://jsfiddle.net/aL7pes70/1/

【讨论】：

【解决方案4】：

在这种情况下我会尝试将其放入样式表中

html, body{overflow:hidden;}

这样可以禁用滚动条，并且作为累积效果，它们会禁用键盘滚动

【讨论】：

【解决方案5】：

将此代码放在您的 html 标头中：

<style type="text/css">
html {
        overflow: auto;
}
</style>

【讨论】：

不“溢出：自动；”像默认行为一样渲染？
overflow: visible 是默认行为。顺便说一句，我并不是说答案是正确的。

【解决方案6】：

如果你真的需要它......

html { overflow-y: hidden; }

【讨论】：

嗯，在样式表或<style> 元素中。
很好，但它只是隐藏了滚动条；如果我使用键盘，它会向下滚动。如何停用向下滚动？
问题是“删除垂直滚动条”，而这正是这样做的。您可以尝试将keyup 或keydown 绑定到文档并在事件代码等于向下箭头时取消，或者在事件处理程序上使用scrollTo(0,0) 将其还原。
提出一个新问题并准确说明您想要什么。还请说明您的 Javascript 水平。
@AZIRAR，我想希望你会意识到这是一个坏主意是太希望了 :-) 浏览器窗口的内容可以正确地被认为是“你的”，浏览器本身（滚动条、关闭按钮、离开网站的导航等等）属于用户。当他们没有足够的垂直空间来呈现您的页面并且您不允许他们向下滚动时会发生什么？