scroll和wheel事件

scroll

1 .scroll事件在滚动条滚动时被触发
2 . scroll检测的是滚动条的滚动，当滚动条不能滚动（到顶或到底）时，scroll便不再触发
3 .默认滚动不能禁止
4 .scroll事件可以被高频率的触发,事件处理程序不应该执行高性能消耗的操作,推荐的做法是scroll里面的操作使用requestAniamtionFrame()操作
5 .感觉animateJS应该做了这个优化吧

wheel在鼠标滚轮滚动的时候触发

1 .wheel在鼠标滚轮滚动的时候被触发,由于鼠标滚轮时大部分都会触发scroll事件,所以wheel事件先触发
2 .一旦滚动条到底部的时候,滑动鼠标滚轮继续滚动,wheel还是会一直触发,而scroll这时不会触发
3 .可以禁止滚轮滚动
4 .不要将wheel事件与[scroll]事件混淆。事件的默认操作wheel是特定于实现的，不一定调度scroll事件。即使是这样，事件delta*中的值wheel也不一定反映内容的滚动方向。因此，不要依赖wheel事件的delta*属性来获取滚动方向。相反，检测事件[scrollLeft]中[scrollTop]目标的值变化。scroll
5 .中间滚轮按下去的时候.也可以滚动,但是不会触发scroll事件
6 .better-scroll的处理操作,真正和滚动有关的只有wheel事件,没有监听scroll事件.而且他这种操作是会屏蔽中键按下触发滚动的.这种操作不知道屏蔽之后可不可以
7 .mouseWheel是非标准事件,已经被这个事件代替
8 .属性

useEffect(()=>{
      let bs=new BScroll(ref.current,{
        mouseWheel: {
          speed:100,
          easeTime:100,
          dampingFactor:0.05,
        },
        scrollY:true,
      })
      bs.on('scrollEnd',(e)=>{
        // console.log(e)
      })

      bs.on('mousewheelStart',(e)=>{
        // console.log('start',e)
      })

      bs.on('mousewheelMove',(e)=>{
        console.log(e,'滚动')
      })

      bs.on('mousewheelEnd',(e)=>{
        // console.log(e,'结束')
      })
    },[])
//Better-scroll实现的操作

9 .据滚轮方向（即该事件的各delta属性值）来推断文档内容的滚动方向，因标准未定义滚轮事件具体会引发什么样的行为，引发的行为实际上是各浏览器自行定义的。即便滚轮事件引发了文档内容的滚动行为，也不表示滚轮方向和文档内容的滚动方向一定相同。因而通过该滚轮事件获知文档内容滚动方向的方法并不可靠。需要检查元素的scroll值判断才知道是朝什么方向滚动
10 .他的滚动完全就是用whell自己做
11 .属性

1 .deltaMode:滚动值得类型:DOM_DELTA_PIXEL:像素.DOM_DELTA_LINE:线,DOM_DELTA_PAGE:页面
2 .deltaX:水平滚动得值,以deltaMode为单位
3 .deltaY:垂直滚动的值,以deltaMode为单位
4 .deltaZ:Z轴滚动的值,以deltaMode为单位

全部事件总结

1 .scroll,wheel,mousewheel,DOMMouseScroll
2 .兼容性
[图片上传失败...(image-d0be31-1647574199505)]

注意react的onWheel事件不能阻止默认滚轮事件触发,还会有一个警告

onWheel
属性：

number deltaMode
number deltaX
number deltaY
number deltaZ

1 .需要ref拿到dom操作,这里被普通的接管了,普通的是可以通过e.preventDefaault()阻止了默认的滚动,但是鼠标中间键按下触发的滚动,是无法阻止的,并且不会触发wheel事件,那这里就不行了,所以还是不能用wheel来做这个

ref.current.onmousewheel=function(e){
        console.log('111')
        // e.preventDefault()
      }

      ref.current.addEventListener('wheel',(e)=>{
        console.log('333',e.deltaX,e.deltaY)
        e.preventDefault()
        
      })
//这些就不能用了

2 .