Question

如何自定义浏览器滚动条样式

Answer 1

body{ 

    scrollbar-base-color: #C0C0C0;

    scrollbar-base-color: #C0C0C0; 

    scrollbar-3dlight-color: #C0C0C0; 

    scrollbar-highlight-color: #C0C0C0; 

    scrollbar-track-color: #EBEBEB;

    scrollbar-arrow-color: black; 

    scrollbar-shadow-color: #C0C0C0;

    scrollbar-dark-shadow-color: #C0C0C0;

}

分别对应滚动条位置

测试：

 .wrapper2 { 

    width: 400px; 

    overflow-x: scroll; 

    overflow-y: hidden;

    scrollbar-base-color: #1C86EE;

    scrollbar-base-color: #1C86EE;

    scrollbar-3dlight-color: #1C86EE;

    scrollbar-highlight-color: #1C86EE;

    scrollbar-track-color: #EBEBEB;

    scrollbar-arrow-color: black;

    scrollbar-shadow-color: #1C86EE;

    scrollbar-dark-shadow-color: #1C86EE;

}

<div class="wrapper2">

    <div class="div2">

        <table width="100%" border="0" cellspacing="0" cellpadding="0">

            <tbody>

                <tr>

                <td>table cell</td>

                ...

                </tr>

            </tbody>

        </table>

    </div>

</div>

效果：

Answer 2

第一种是利用Javascript模拟滚动条，然后将它的样式渲染改变，方法和代码比较多，也比较复杂，一般这样的方法都会制作成插件，也附带使用方法，可以在网络上搜索“Javascript自定义滚动条”找到。
第二种是使用CSS来自定义滚动条的样式。CSS代码如下：
<style type=text/css<!--html,
body {scrollbar-face-color: #f892cc;
scrollbar-highlight-color: #F00;scrollbar-shadow-color: #FFF;
可以试试看看上面的办法

Answer 3

第一种是利用Javascript模拟滚动条，然后将它的样式渲染改变，方法和代码比较多，也比较复杂，一般这样的方法都会制作成插件，也附带使用方法，可以在网络上搜索“Javascript自定义滚动条”找到。
第二种是使用CSS来自定义滚动条的样式。CSS代码如下：
<style type=text/css<!--html,
body {scrollbar-face-color: #f892cc;
scrollbar-highlight-color: #F00;scrollbar-shadow-color: #FFF;