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

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

如果你需要dynamic地隐藏和显示滚动条,你可以使用

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

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

在你的代码的某处。

 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

 <body style="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%的元素具有窗口视口的全部高度,而元素绝对使用底部:nnPX将被设置在窗口底部边缘以上nn个像素处。

试试CSS。

如果你想删除水平

 overflow-x: hidden; 

如果你想删除垂直

 overflow-y: hidden; 

如果你还需要支持Internet Explorer 6,只需溢出HTML

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

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

在IE(IE10及以上版本)的现代版本中,可以使用-ms-overflow-style属性隐藏滚动条。

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

在Chrome中,可以对滚动条进行样式设置:

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

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

IE有滚动条的一些错误。 所以如果你想要两者之一,你必须包含以下内容来隐藏水平滚动条:

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

并隐藏垂直:

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

(我还不能评论,但想分享一下):

Lyncee的代码在桌面浏览器中为我工作。 但是,在iPad(Chrome,iOS 9)上,它使应用程序崩溃。 为了解决这个问题,我改变了

 document.documentElement.style.overflow = ... 

 document.body.style.overflow = ... 

这解决了我的问题。

因为Firefox有一个箭头键快捷方式,所以你可能想用CSS样式来放一个<div>overflow:hidden;

使用JQuery,您可以使用以下代码禁用滚动条:

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

您也可以使用此代码重新启用它:

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