自定义滚动条

1.滚动条的设置，如果想要实现下面这个滚动效果

2.css样式如下：

        ::-webkit-scrollbar {  //设置滚动条的宽高
            width: 10px;
            height: 10px;
            background: transparent;
            overflow: visible;
        }

        ::-webkit-scrollbar-button:vertical:single-button:start {  //设置滚动条的按钮，这里是设置上图的1
            width: 10px;
            height: 10px;
            display: block;
            background-color: #d23d47;
            background-image: url(img/uparrow.png);  //这里是自己找的上三角型图片，可以去阿里巴巴矢量图标库查找
            background-size: 100% 100%;
        }

        ::-webkit-scrollbar-button:vertical:single-button:end { //设置滚动条的按钮，这里是设置上图的3
            width: 10px;
            height: 10px;
            display: block;
            background-color: #d23d47;
            background-image: url(img/downarraw.png);//这里是自己找的下三角型图片，可以去阿里巴巴矢量图标库查找
            background-size: 100% 100%;
        }

        ::-webkit-scrollbar-thumb {// 设置滚动条上的滚动滑块，这里是设置上图的2
            background: white;
            background: #ff6600;
            overflow: visible;
            border-radius: 100px;
        }

        ::-webkit-scrollbar-track {// 设置滚动条轨道，这里是设置上图的4
            background: #c53d45;
            margin-top: 0.1em;
            margin-bottom: 0.1em;
        }

eg:
 <div style="height: 100px;width: 100px;overflow-y: auto;">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>