CSS 禁止滚动条(隐藏或屏蔽IE滚动条的几种常用方法)

html-css013

CSS 禁止滚动条(隐藏或屏蔽IE滚动条的几种常用方法),第1张

CSS 禁止滚动条,有4种方法,具体如下:

1、完全隐藏

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

<boby scroll="no">

2、在不需要时隐藏

指当浏览器窗口宽度或高度大于页面的宽或高时,不显示滚动条;

反之,则显示;

<boby scroll="auto">

3、样式表方法

在<boby>里加入style="overflow-x:hidden",可隐藏水平滚动条;

加入style="overflow-y:hidden",可隐藏垂直滚动条。

被包含页面里加入

<style>

html { overflow-x:hidden }

</style>

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,假设用户希望 滚动条 一直处于显示状态 肿么办捏???? ok ,继续

var st

var scroll=function(e){

clearTimeout(st)

st=setTimeout(function(){

window.scrollTo(loc.scrollLeft,loc.scrollTop)

},5)

}

window.onscroll=scroll

上述代码 可以似的 用户的任何滚动操作,都将被还原。注意这个方式很消耗内存(虽然做了setTimeout),但是谁让需求比较二逼呢对吧~