Question

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

Answer 1

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

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

和

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

代码中的某处。

Answer 2

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
}

Answer 3

尝试CSS

<body style="overflow: hidden">

Answer 4

到目前为止，我们已经溢出：隐藏在身体上。然而IE并不总是尊重它，你需要在body元素上放置scroll =“no”和/或放置overflow：隐藏在html元素上。

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

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

在正文中授予高度100％的元素具有窗口视口的完整高度，并且元素绝对使用底部定位：nnPX将设置在窗口底部边缘上方的像素等处。

Answer 5

尝试CSS。

如果要删除水平

overflow-x: hidden;

如果你想删除垂直

overflow-y: hidden;

Answer 6

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

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

和

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

Answer 7

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

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

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

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

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

Answer 8

IE在滚动条中有一些错误。因此，如果您想要两者中的任何一个，则必须包含以下内容以隐藏水平滚动条：

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

并隐藏垂直：

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

Answer 9

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

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

document.documentElement.style.overflow = ...

到

document.body.style.overflow = ...

解决了我的问题。

Answer 10

因为Firefox有一个箭头键快捷方式，你可能想用CSS样式<div>围绕它overflow:hidden;。

Answer 11

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

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

您也可以使用以下代码重新启用它：

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

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

11 个答案: