Disable browsers vertical and horizontal scrollbars
Question
是否可以使用 jQuery 或 javascript 禁用浏览器的垂直和水平滚动条？
11 answers
solution1
145 2008-10-28 09:44:48
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.
solution2
128 2012-05-30 07:18:58
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
}
solution3
50 2008-10-28 09:07:32
试试 CSS
<body style="overflow: hidden">
solution4
31 2008-10-28 10:32:42
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.
solution5
12 2011-12-14 12:49:57
Try CSS.
If you want to remove Horizontal
overflow-x: hidden;
And if you want to remove Vertical
overflow-y: hidden;
solution6
10 2013-12-27 12:56:13
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 .
solution7
8 2010-08-05 20:20:38
In case you also need support for Internet Explorer 6, just overflow the html
$("html").css("overflow", "hidden");
and
$("html").css("overflow", "auto");
solution8
5 2013-04-18 11:34:33
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;
solution9
4 2015-09-25 11:41:51
(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 = ...
to
document.body.style.overflow = ...
which solved my problem.
solution10
2 2013-04-26 00:21:58
Because Firefox has an arrow key short cut, you probably want to put a <div> around it with CSS style: overflow:hidden; .
solution11
2 2016-05-08 10:33:38
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');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.