scroll和wheel事件

Posted 2023-04-22

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

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 .属性

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

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

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

2 .

扩展jquery scroll事件，支持 scroll start 和 scroll stop

参考地址：

http://www.ghugo.com/special-scroll-events-for-jquery/

javascript里有一个事件是滚动事件，只要拖动滚动条，就会触发事件。

用jquery的话，这个事件scroll 可以查看jquery api ：http://api.jquery.com/scroll/

但scroll 事件有一个缺陷，就是只能判断滚动条滚动，而不能监控滚动条停止滚动时的事件。

现用jquery扩展一下scroll 事件，新增

不多说，直接上代码实在点。

(function(){
 
    var special = jQuery.event.special,
        uid1 = ‘D‘ + (+new Date()),
        uid2 = ‘D‘ + (+new Date() + 1);
 
    special.scrollstart = {
        setup: function() {
 
            var timer,
                handler =  function(evt) {
 
                    var _self = this,
                        _args = arguments;
 
                    if (timer) {
                        clearTimeout(timer);
                    } else {
                        evt.type = ‘scrollstart‘;
                        jQuery.event.handle.apply(_self, _args);
                    }
 
                    timer = setTimeout( function(){
                        timer = null;
                    }, special.scrollstop.latency);
 
                };
 
            jQuery(this).bind(‘scroll‘, handler).data(uid1, handler);
 
        },
        teardown: function(){
            jQuery(this).unbind( ‘scroll‘, jQuery(this).data(uid1) );
        }
    };
 
    special.scrollstop = {
        latency: 300,
        setup: function() {
 
            var timer,
                    handler = function(evt) {
 
                    var _self = this,
                        _args = arguments;
 
                    if (timer) {
                        clearTimeout(timer);
                    }
 
                    timer = setTimeout( function(){
 
                        timer = null;
                        evt.type = ‘scrollstop‘;
                        jQuery.event.handle.apply(_self, _args);
 
                    }, special.scrollstop.latency);
 
                };
 
            jQuery(this).bind(‘scroll‘, handler).data(uid2, handler);
 
        },
        teardown: function() {
            jQuery(this).unbind( ‘scroll‘, jQuery(this).data(uid2) );
        }
    };
 
})();

可以将上面代码保存到一个文件，这相当于一个插件，呵呵。调用方法如下：

(function(){
    jQuery(window).bind(‘scrollstart‘, function(){
        console.log("start");
    });
 
    jQuery(window).bind(‘scrollstop‘, function(e){
        console.log("end");
    });
 
})();