css禁止滚动条隐藏或屏蔽ie滚动条多种方法

发布时间:2019-07-18编辑:脚本学堂
有关css禁止滚动条,隐藏或屏蔽ie浏览器滚动条的方法,可隐藏滚动条,当浏览器窗口宽度或高度大于页面的宽或高时,不显示滚动条,需要的朋友参考下。

1,css样式表隐藏滚动条
在<boby>里加入style="overflow-x:hidden",可隐藏水平滚动条;加入style="overflow-y:hidden",可隐藏垂直滚动条。
被包含页面中加入
 

<style>
html { overflow-x:hidden; }
</style>
 

解释:
body{ overflow-x:hidden; }在标准 DTD 下是不可以的。

2、完全隐藏滚动条
在<boby>里加入scroll="no",可隐藏滚动条;
 

<boby scroll="no">

3、在不需要时隐藏滚动条
指当浏览器窗口宽度或高度大于页面的宽或高时,不显示滚动条;反之,则显示;
 

<boby scroll="auto">

4、隐藏滚动条的另一种方法

<style type="text/css">
body {
overflow-x:hidden;
overflow-y:hidden;
}
</style>

<style type="text/css">
html {
overflow-x:hidden;
overflow-y:hidden;
}
</style>

禁止页面滚动,滚动条显示与否,手持设备兼容与否。

禁止页面滚动的三种方法

1,依靠css将页面
 

document.documentElement.style.overflow='hidden';
document.body.style.overflow='hidden';//手机版设置这个。
 

如果设置了如上,页面的滚动条将会消失,此时鼠标滚轮失效。
但是用键盘上下左右键,页面仍然可以滚动。

2,在 1 的基础上 添加 js功能
 

var move=function(e){
e.preventDefault && e.preventDefault();
e.returnValue=false;
e.stopPropagation && e.stopPropagation();
return false;
    }
    var keyFunc=function(e){
if(37<=e.keyCode && e.keyCode<=40){
return move(e);
}
}
document.body.onkeydown=keyFunc;
 

鼠标,键盘 都不能将页面滚动。

3,假设用户希望 滚动条 一直处于显示状态,怎么办?
 

var st
var scroll=function(e){
clearTimeout(st);
st=setTimeout(function(){
window.scrollTo(loc.scrollLeft,loc.scrollTop);
},5);
}
window.onscroll=scroll;
 

以上代码实现用户的任何滚动操作,都将被还原。
注意,此方式很消耗内存(虽然做了setTimeout),建议谨慎选择。