如果搜索出来的连接不能用,把连接中间的日期去掉就好了,最近更改了所有连接的名字

前端开发之滚动事件

前端开发类 264℃

Scroll

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

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

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

事件方法

方法名 说明
onScroll 滚动对象内部内容区域的滚动事件
onwheel 鼠标滚轮滚动触发事件(主要和onScroll做区别)
scroll(x, y)scroll(options) 元素滚动到特定的坐标
scrollBy(x, y)scrollBy(options) 元素滚动一段特定的距离 x,y: 坐标 options: {x:0, y:2, behavior: 'smooth'}
scrollTo(x, y)scroll(options) 元素滚动到特定的坐标

属性

名称 说明 编辑性质
scrollLeft 滚动条到元素左边的距离 可读写 element.scrollLeft = 12px
scrollTop 滚动条到元素顶部的距离 可读写 element.scrollTop = 12px
scrollRight 滚动条到元素右边的距离 可读写 element.scrollRight = 12px

常用滚动事件

  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. 滚动条组成
属性 说明
::-webkit-scrollbar 滚动对象内部内容区域的滚动事件
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-thumb 滚动条
::-webkit-scrollbar-track 滚动条滚动轨道
::-webkit-scrollbar-track-piece 滚动条未及的滚动轨道
::-webkit-scrollbar-corner 横向与竖向滚动交叉的边角
::-webkit-resizer 右下角拖动块儿
  1. 样式设置示例
    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    

转载请注明:EZLOST » 前端开发之滚动事件

喜欢 (4)