Set scroll bar style

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>

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 设置或检索滚动条基准颜色。

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!

Recommended reading:

Three ways to horizontally and vertically center absolutely positioned elements

##width:100%; and The difference in using width:auto

The above is the detailed content of Set scroll bar style. For more information, please follow other related articles on the PHP Chinese website!