可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

Is it possible to disable the browsers vertical and horizontal scrollbars using jQuery or javascript?

回答1:

In case you need possibility to hide and show scrollbars dynamically you could use

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

and

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

somewhere in your code.

回答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 }

回答3:

Try CSS

<body style="overflow: hidden">

回答4:

So far we have overflow:hidden on the body. However IE doesn't always honor that and you need to put scroll="no" on the body element as well and/or place overflow:hidden on the html element as well.

You can take this further when you need to 'take control' of the view port you can do this:-

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

An element granted height 100% in the body has the full height of the window viewport, and element positioned absolutely using bottom:nnPX will be set nn pixels above the bottom edge of the window, etc.

回答5:

Try CSS.

If you want to remove Horizontal

overflow-x: hidden;

And if you want to remove Vertical

overflow-y: hidden;

回答6:

In case you also need support for Internet Explorer 6, just overflow the html

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

and

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

回答7:

In modern versions of IE (IE10 and above), scrollbars can be hidden using the -ms-overflow-style property.

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

In Chrome, scrollbars can be styled:

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

This is very useful if you want to use the 'default' body scrolling in a web application, which is considerably faster than overflow-y: scroll.

回答8:

IE has some bug with the scrollbars. So if you want either of the two, you must include the following to hide the horizontal scrollbar:

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

and to hide vertical:

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

回答9:

(I can't comment yet, but wanted to share this):

Lyncee's code worked for me in desktop browser. However, on iPad (Chrome, iOS 9), it crashed the application. To fix it, I changed

document.documentElement.style.overflow = ...

document.body.style.overflow = ...

which solved my problem.

回答10:

Because Firefox has an arrow key short cut, you probably want to put a <div> around it with CSS style: overflow:hidden;.

回答11:

Using JQuery you can disable scrolling bar with this code :

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

Also you can enable it again with this code :

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

文章来源: Disable browsers vertical and horizontal scrollbars

标签

overflow