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

IT技术 javascript jquery
2021-03-10 10:17:04

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

6个回答

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

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

和

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

在您的代码中的某处。

oveflow: hidden 不会阻止智能手机上的任何事情。
2021-04-18 10:17:04
在 chrome 中，这会禁用滚动条而不隐藏它（它仍然存在并且仍在更改其他所有内容的大小，但现在它变灰了）
2021-04-26 10:17:04
溢出隐藏在 IE 中并不总是有效。请参阅下面的 AnthonyWJones 回答。
2021-05-16 10:17:04 
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
}
这是一个绝妙的解决方案，值得点赞。它还解决了固定 css 的问题，其中页面将滚动到顶部。
2021-04-17 10:17:04
作为唯一的纯 javascript 答案，两个赞成票非常少。
2021-04-20 10:17:04
这是唯一对我有用的解决方案，因为主体隐藏溢出不会攻击整个文档，这是解决此问题的正确方法！非常感谢，你为我节省了很多时间！
2021-04-28 10:17:04
@HermannIngjaldsson：看到 OP 要求提供 JavaScript 或 jQuery 解决方案，并在 4 年前接受了 jQuery 解决方案，这才有意义。我并不是说答案不好，只是说明了较低票数的明显情况。无论如何从我那里+1。
2021-05-02 10:17:04

试试 CSS

<body style="overflow: hidden">
为了浏览器兼容性，我还会将此样式添加到 HTML 标记中： html, body {overflow:hidden;}
2021-05-13 10:17:04

到目前为止，我们已经溢出：隐藏在身体上。但是 IE 并不总是尊重这一点，您还需要在 body 元素上放置 scroll="no" 和/或将 overflow:hidden 放在 html 元素上。

当您需要“控制”视口时，您可以更进一步：-

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

在 body 中授予高度 100% 的元素具有窗口视口的完整高度，并且绝对使用底部定位的元素：nnPX 将被设置为窗口底部边缘上方的 nn 个像素，依此类推。

',' 不应该是 ';', 在 body css 中吗？
2021-04-25 10:17:04

试试 CSS。

如果要删除水平

overflow-x: hidden;

如果你想删除 Vertical

overflow-y: hidden;
其它你可能感兴趣的问题
上一篇上传前调整图像大小 下一篇JavaScript 中的循环计时器