• 技术文章 >web前端 >css教程

    设置滚动条样式

    php中世界最好的语言php中世界最好的语言2018-03-22 15:41:32原创1271
    这次给大家带来设置滚动条样式,设置滚动条样式的注意事项有哪些,下面就是实战案例,一起来看一下。

    废话不多说了,直接给大家贴代码了。具体代码如下所示:

    1.p 自动滚动

    <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.滚动条颜色

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

    相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    推荐阅读:

    三种绝对定位元素的水平垂直居中的办法

    width:100%;与width:auto的使用区别

    以上就是设置滚动条样式的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:样式 滚动 设置
    上一篇:CSS的居中布局总结 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 手把手教你使用CSS实现酷炫六边形网格背景图• 实例详解CSS渐变锯齿问题如何解决!• 另辟蹊径!看看使用CSS滤镜怎么构建圆角和波浪效果• 聊聊怎么利用 CSS 构建花式透视背景• 详解css中的比较函数(示例介绍)
    1/1

    PHP中文网