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;
   }