「滚动条样式」浏览器自带的滚动条样式

滚动条样式

通常只适用于chrome：

<p class="parent">
    <p class="child"></p>
</p>

.parent{
            overflow: auto;
            width:100px;
            background-color: #ffcccc;
            height:200px;
        }
        .child{
            height:500px;
            width:400px;
            background-color: #ffcccc;
        }
        ::-webkit-scrollbar {  /*滚动条整体样式*/
            width: 14px;  /*宽分别对应竖滚动条的尺寸*/
            height: 5px;  /*高分别对应横滚动条的尺寸*/
        }

        ::-webkit-scrollbar-track { /*滚动条里面轨道*/
            background-color: #bee1eb;
        }

        ::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
            background-color: #00aff0;
        }

该滚动条的样式只适用于chrome，对于其他的浏览器需要适配。而且默认的滚动条是占位的，目前无法消除。

webkit浏览器滚动条样式设置位置参考如下：

IE浏览器滚动条样式设置位置参考如下图

滚动事件的优化：

使用函数节流来确保一段时间内只执行一次scroll事件。
使用函数防抖来限制规定事件内没有重复执行，才会真正执行scroll事件。
复杂的dom操作不要放在scroll事件里。
可以在外面定义好的变量就在外面定义，在scroll事件里直接使用。
window.requestAnimationFrame() 方法告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画。该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。
可尝试使用pointer-events: none来禁止鼠标事件，提高滚动时的性能

`window.requestAnimationFrame()：`

当你需要更新屏幕画面时就可以调用此方法。在浏览器下次重绘前执行回调函数。回调的次数通常是每秒60次，但大多数浏览器通常匹配 W3C 所建议的刷新频率。在大多数浏览器里，当运行在后台标签页或者隐藏的<iframe> 里时，requestAnimationFrame() 会暂停调用以提升性能和电池寿命。

回调函数会被传入一个参数，DOMHighResTimeStamp，指示当前被 requestAnimationFrame() 排序的回调函数被触发的时间。即使每个回调函数的工作量的计算都花了时间，单个帧中的多个回调也都将被传入相同的时间戳。该时间戳是一个十进制数，单位毫秒，最小精度为1ms(1000μs)。

语法：

window.requestAnimationFrame(callback);

callback

一个指定函数的参数，该函数在下次重新绘制动画时调用。这个回调函数只有一个传参，DOMHighResTimeStamp，指示requestAnimationFrame() 开始触发回调函数的当前时间（performance.now() 返回的时间）。

一个 long 整数，请求 ID ，是回调列表中唯一的标识。是个非零值，没别的意义。你可以传这个值给 window.cancelAnimationFrame() 以取消回调函数。

pointer-events: none

元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。

浏览器自带的滚动条样式