Set scroll bar style-CSS Tutorial-php.cn

Set scroll bar style

php中世界最好的语言

Release： 2018-03-22 15:41:32

Original

1902 people have browsed it

This time I will bring you how to set the scroll bar style and what are the precautions for setting the scroll bar style. The following is a practical case, let's take a look.

No more nonsense, I will just post the code for you. The specific code is as follows:

1.p Automatic scrolling

<script type="text/javascript">
function startmarquee(lh, speed, delay) {
var t;
var oHeight = 300; /** p的高度 **/
var p = false;
var o = document.getElementById("show");
var preTop = 0;
o.scrollTop = 0;
function start() {
t = setInterval(scrolling, speed);
o.scrollTop += 1;
}
function scrolling() {
if (o.scrollTop % lh != 0
&& o.scrollTop % (o.scrollHeight - oHeight - 1) != 0) {
preTop = o.scrollTop;
o.scrollTop += 1;
if (preTop >= o.scrollHeight || preTop == o.scrollTop) {
o.scrollTop = 0;
}
} else {
clearInterval(t);
setTimeout(start, delay);
}
}
setTimeout(start, delay);
}
window.onload = function () {
/**startmarquee(一次滚动高度,速度,停留时间);**/
startmarquee(20, 40, 50);
} 
</script>
 <p id="show" style="height: 600px; width: 100%; overflow-y: scroll;scrollbar-base-color:#ffffff;SCROLLBAR-HIGHLIGHT-COLOR:#ffffff;SCROLLBAR-ARROW-COLOR:#ffffff; overflow-x: none;"></p>

Copy after login

2. Scroll bar color

scrollbar-3d-light-color 设置或检索滚动条亮边框颜色 
crollbar-highlight-color 设置或检索滚动条3D界面的亮边（ThreedHighlight）颜色
scrollbar-face-color 设置或检索滚动条3D表面（ThreedFace）的颜色 
scrollbar-arrow-color 设置或检索滚动条方向箭头的颜色
scrollbar-shadow-color 设置或检索滚动条3D界面的暗边（ThreedShadow）颜色 
scrollbar-dark-shadow-color 设置或检索滚动条暗边框（ThreedDarkShadow）颜色 
scrollbar-base-color 设置或检索滚动条基准颜色。

Copy after login

Believe it or not After reading the case in this article, you have mastered the method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!