css如何隐藏div滚动条却又能实现滚动功能
的有关信息介绍如下:很多时候我们为了美观不想出现滚动条,但是又要保留随着鼠标滚动而滚动的功能。
下面我来谈谈该如何做。
原理如下: 可以用padding等,把滚动条挤出到外面去,达到隐藏的效果。
具体操作:
在当前div的外面在嵌套一个div,外面div设置隐藏滚动条,里面的div宽度小于外面n像素,右内边距设置成n像素,然后在设置显示竖直滚动条
先给大家看一个简单的有滚动条的html界面:
代码如下:
for(var i=0;i<200;i++)
{
document.write("
hello
")}
代码很简单,我用一个for循环在div中生成了200条段落,
然后div又设置了固定的高宽,这样所有的段落超过了这个高宽,自然就会让div出现滚动条了
运行结果如下图所示:
设置外面div设置隐藏滚动条,里面的div宽度小于外面n像素,右内边距设置成n像素,然后在设置显示竖直滚动条
代码如下:
运行效果
然后我再去掉里面的红色边框,然后这样看起来是不只有一个div,并且出现了滚动条了?哈哈