Scroll

1. Dom元素滚动时触发的Scroll事件
2. 事件对象：window, Dom元素
3. 事件捕捉：元素滚动条滚动时

滚动原理(滚动发生了什么？)

1. 页面重排: 页面重新生成布局，重排必定引起重绘
2. 页面重绘: 页面重新绘制，不一定重排

事件方法

属性

常用滚动事件

1. 滚动条触底

   if(target.scrollTop + target.offsetHeight > target.scrollHeight){
     //滚动条已触底
   }

2. 到顶

   if(target.scrollTop === 0){
     //滚动条到顶
   }

3. 及左

   if(target.scrollLeft === 0){
     //横向滚动条到左部
   }

4. 及右

   if(target.scrollLeft === target.offsetWidth > target.scrollWidth){
     //横向滚动条到右部
   }

5. 滚动方向

   /* 
     scrollTopPre < scrollTop = 'down'
     scrollTopPre > scrollTop = 'up' 
   */
   let scrollTopPre = 0;
   function onScroll(e){
     const {target: {scrollTop}} = e 
     if( scrollTopPre < scrollTop){ console.log('down')}
     if( scrollTopPre > scrollTop){ console.log('up')}
     ...
     // end
     scrollTopPre = scrollTop
   }

注意事项及性能优化

1. 防抖

   a. 可以用 lodash 的 debounce 方法 debounce(onScroll, 200, {}) 
   b. 也可自造轮子

2. 节流

   a. 可以用 lodash 的 throttle 方法 throttle(onScroll, 200, {})
   b. 也可自造轮子 

3. 使用 window.requestAnimationFrame将浏览器读写操作分离， 把写操作放到下一次重新渲染

   // 参考阮一峰
   window.addEventListener('scroll', (e)=>{
     window.requestAnimationFrame((timestamp)=>{
       // timestamp  一个 long 整数，请求 ID ，是回调列表中唯一的标识。是个非零值，没别的意义。你可以传这个值给 window.cancelAnimationFrame() 以取消回调函数。
       onScroll(e)
     })
   })

滚动条相关

1. 滚动条组成

2. 样式设置示例

   ::-webkit-scrollbar {
     width: 10px;
     height: 10px;
   }