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
- pc端弹出层滚动外层也滚动问题
- 移动端弹出层滚动时禁止body滚动
- 移动端弹出层弹出 body还能滚动(滚动穿透)
- 移动端js弹出层滚动的时候 body层不可滚动的解决办法
- 移动端弹出层上禁止页面滚动
- 移动端弹出层后禁止背景底层 body滚动
- vue 手机端弹出层背景滚动解决方案
- 移动端如何禁用底层的滚动事件,保证弹出层的滚动事件正常运行
- 弹出层居中,滚动条滚动始终在屏幕中间
- 弹出层居中随鼠标滚动而滚动
- 弹出层,背景变暗,禁用滚动条
- 弹出层并随滚动而动
- 弹出层,背景变暗,禁用滚动条
- 弹出层时取消页面滚动
- layer 弹出iframe层 去掉滚动条
- modal 弹出层后禁止底层滚动
- Android+微信 弹出层无法滚动?
- 弹出层与滚动条控件
- macaca 测试web(3)
- 树莓派学习
- C结构体和C++结构体的区别
- order by 语句
- ssh框架整合
- pc端弹出层滚动外层也滚动问题
- 7天玩转云服务器
- Microsoft Project 组件Aspose.Tasks V17.8发布 | 附下载
- (未解决)牛客 题库 STL中的unordered_map和priority_queue使用的底层数据结构分别是什么?()
- jenkins自动编译maven项目
- node的http.get一个诡异的问题
- 平移滑动详情页面
- [通俗易懂]深入理解TCP协议(下):RTT、滑动窗口、拥塞处理
- Codeforces Round #433 (Div. 2) D. Jury Meeting(思维 贪心 前后缀)