css随滚动条滚动如何设置?div如何显示滚动条?

发布时间:2020-09-09编辑:脚本学堂
如何用css实现随滚动条滚动效果,div显示滚动条如何实现,包括div显示上下左右滚动条、修改滚动条颜色的代码等。

一、css随滚动条滚动代码

例子:
 

<div style="width:760px;height:1500px;background-color:#f4f4f4;" align="center"></div> <script language="javascript"> lastScrollY=0; function heartBeat(){ diffY=document.body.scrollTop; percent=.1*(diffY-lastScrollY); if(percent>0)percent=Math.ceil(percent); else percent=Math.floor(percent); document.all.lanrentuku.style.pixelTop+=percent; lastScrollY=lastScrollY+percent; } suspendcode45="<DIV id=lanrentuku style='left:800px;POSITION:absolute;TOP:18px;'><A HREF='http://www.jb200.com' target=_blank Title='jbxue'><img src='http://www.jb200.com/code/ad.gif' border=0></A></div>" document.write(suspendcode45); window.setInterval("heartBeat()",1); </script>

二、div显示滚动条的css代码

1、div显示上下左右滚动条
 

<div style="width:260px;height:120px; overflow:scroll; border:1px solid;"> 这里是你要显示的内容 </div>

2、div显示上下滚动条的css代码

<div style="width:260px;height:120px; overflow-y:scroll; border:1px solid;"> 这里是你要显示的内容 </div>
 

 
3、div显示左右滚动条的css代码
 

<div style="width:260px;height:120px; overflow-x:scroll; border:1px solid;"> 这里是你要显示的内容 </div>


 
修改滚动条颜色的代码:
scrollbar-face-color(立体滚动条凸出部分的颜色)
scrollbar-highlight-color(滚动条空白部分的颜色)
scrollbar-shadow-color(立体滚动条阴影的颜色)
scrollbar-arrow-color(上下按钮上三角箭头的颜色)
scrollbar-base-color(滚动条的基本颜色)
scrollbar-dark-shadow-color(立体滚动条强阴影的颜色)

三、div添加滚动条,div显示滚动条设置代码

div加滚动条,类似textarea的效果。

注意,直接为div指定overflow属性为auto即可,但是必须指定div的高度。

div滚动条问题:

方法一:
 

<div style=" overflow:scroll; width:400px; height:400px;”></div>

记住宽和高一定要设置噢,否则不行。
不过在不超出时,会有下面的滚动条,所以不是最好的选择。

方法二、
 

<div style=" overflow-y:auto; overflow-x:auto; width:400px; height:400px;”></div>

记住宽和高一定要设置。
在宽和高不超出时,只是一条线 。

div显示滚动条设置说明
直接为div指定overflow属性为auto即可,但是必须指定div的高度。

如下:
 

<div style="position:absolute; height:400px; overflow:auto">
</div>

如果要出现水平滚动条,则:

overflow-x:auto
 

同理,垂直滚动条为:

overflow-y:auto
 

如果该div被包含在其他对象例如td中,则位置可设为相对:position:relative。