pc端弹出层滚动外层也滚动问题

来源:互联网 发布:淘宝学校排名 编辑:程序博客网 时间:2024/05/29 13:34

问题现象:
在网页上,写了一个弹出层,弹出层可以滚动,在弹出层滚动到最上方或最下方时,接着再往上(下)滚动,则底层的主体(body)页面跟着滚动。
这里写图片描述

解决:
本来是想通过滚动监听来控制,但后来发现各种阻止无效。
最后是用在弹出层出来时禁用掉body的滚动条[ $(‘body’).css(‘overflow-y’,’hidden’); ]的方式,但需要处理下body滚动条的样式。

关于滚动scroll整理如下:
滚动分为两种滑轮和键盘。
滑轮滚动又会触发mousewheel和scroll事件。
键盘滚动只触发scroll事件。

在实践中,发现 :
scroll 事件既不能 event.stopPropagation 也不能 event.preventDefault ;
mousewheel 事件不能 event.stopPropagation 可以 event.preventDefault ;
查了些资料,感觉最靠谱的是这个:
“为什么scroll不能阻止冒泡,这个我在MDN上找到了答案:上面说,scroll只冒泡到document.defaultView,而且不能cancel掉。”

如下,是测试代码:

    $('#user-list ul').on('mousewheel',function(e){        alert('ul mousewheel');    });    $('#user-list ul').on('scroll',function(e){        alert('ul scroll');    });    document.addEventListener('mousewheel', function(){        alert('document mousewheel');    });    document.addEventListener('scroll', function(){        alert('document scroll');    });    window.addEventListener('mousewheel', function(){        alert('window mousewheel');    });    window.addEventListener('scroll', function(){        alert('window scroll');    });    window.addEventListener('keydown', function(e){        if(37 <= e.keyCode && e.keyCode <= 40 || e.keyCode == 32){            alert('keydown ' + e.keyCode);        }    });

滑轮滚动后:
执行顺序:
ul mousewheel –> document mousewheel –> window mousewheel –> ul scroll –> document scroll –> window scroll

在展开弹出层时,如果用键盘(上下箭头)滚动:
执行顺序:
document scroll –> window scroll

受启发较多的帖子:
https://segmentfault.com/a/1190000003849952
https://segmentfault.com/a/1190000003849952

原创粉丝点击