在模式打开时禁用触摸滚动
Disable touch scrolling when modal is open
我在移动设备上的网站上使用全屏模式。问题是触摸模态会导致正文页面移动,即使它是溢出:隐藏的;
以下是引导程序对此的看法:
支持溢出:隐藏在元素上非常有限 iOS和安卓。为此,当您滚动到顶部或底部时 在这些设备的浏览器中,内容 将开始滚动。
我能做些什么来防止这种情况发生?
将主体设置为位置:固定会导致滚动以丑陋的方式跳到顶部。如果有人想出一个最好的解决方案是什么?
我自己以前也有同样的问题。
我所做的是将正文更改为overflow:hidden
并固定height
等于模态height
并记住文档滚动位置。关闭模态后,我已将记住的滚动位置向后应用并height
到auto
。
它是如此复杂,因为我需要我的模态比窗口大,我希望能够滚动模态。
相关文章:
- 谷歌地图劫持了iphone's滚动(触摸事件)-如何恢复
- 如何检测滚动事件是否像在触摸设备上一样只触发一次
- Sencha触摸:工具栏无法正常滚动
- jQuery触摸滑动内容滚动功能
- 停止触摸滚动还可以防止单击链接
- 移动/触摸屏幕 - 滑动时水平滚动
- 允许在隐藏溢出的情况下进行触摸滚动
- 整页.js触摸滚动固定元素
- 检测触摸向上或向下滚动
- 移动HTML:触摸结束后继续滚动
- JS中的触摸板滚动检测,没有库
- 一页滚动iPad触摸滚动
- 在模式打开时禁用触摸滚动
- 在带有溢出的框中没有通过触摸滚动:在可拖动框中滚动/自动
- Sencha Touch和Clusterize.js,向下传递触摸滚动事件
- 取消IE9触摸滚动事件并调用鼠标移动(可能)
- Angular JS禁用触摸滚动,除了某些元素
- 当在文本字段之间选择时,Sencha触摸滚动问题
- 每次用户触摸滚动到40px时触发事件
- Firefox触摸滚动不工作