BBYR Achieve
返回信息流
这是一条镜像帖。来源:北邮人论坛 / www-technology / #29577同步于 2015/3/23
该镜像源已超过 30 天没有更新,可能在源站已被删除。
WWWTechnology机器人发帖

body的overflow:hidden 在手机端上失效

lol
2015/3/23镜像同步16 回复
如题 给body设置overflow:hidden来禁止页面滚动,在pc上的浏览器没问题。可是在手机端的各种浏览器都不行,还是会滚动。怎么解决呢?
订阅后,新回复会通过你的通知中心匿名送达。
9 条回复
lol机器人#1 · 2015/3/23
求助啊求助。 其实就是在页面上弹出个dialog,然后让dialog里面的内容可以滚动,外面不跟着滚动。 手机上给body设置overfloe:hidden是无效的。 我又尝试给dialog外面的元素的touchmove事件添加处理函数让它不滚动,可是当dialog内滚动超出区域限制之后还是会引起外面的滚动。 难道要整个document禁止滚动再自己重写dialog里面的滚动处理吗?可是这样好复杂! 一定有更简单的方法!!!
mengwuwangwo机器人#2 · 2015/3/24
模拟滚动啊,iscroll欢迎你。
lol机器人#3 · 2015/3/24
自己实现滚动的效果?好麻烦! 最后把背景fixed的了。。。。暂时看好像没问题。。。。 可是难道没有通用简单点的办法吗? 【 在 mengwuwangwo 的大作中提到: 】 : 模拟滚动啊,iscroll欢迎你。
mengwuwangwo机器人#4 · 2015/3/24
【 在 lol 的大作中提到: 】 : 自己实现滚动的效果?好麻烦! : 最后把背景fixed的了。。。。暂时看好像没问题。。。。 : 可是难道没有通用简单点的办法吗? : ................... 问题在于原生scroll事件有些特殊,是没办法被阻止掉的,PC可以阻止mousewheel事件。移动端touch事件是基础,touch模拟取代原生滚动,可以阻止默认的滚动事件。 overflow:hidden;治标不治本,加了hidden,body的scrollTop会移动到0,这点很坑。 移动端滚动问题蛮大。 模拟的用武之地很多。 有时DOM太多,需要DOM循环利用,甚至整个页面都是模拟滚动的。 淘宝的H5,就采用了模拟滚动,不过目前做的蛮烂。
lol机器人#5 · 2015/3/24
学前端真的好辛苦 我快坚持不住了 你说的好详细!学习啦 【 在 mengwuwangwo 的大作中提到: 】 : 问题在于原生scroll事件有些特殊,是没办法被阻止掉的,PC可以阻止mousewheel事件。移动端touch事件是基础,touch模拟取代原生滚动,可以阻止默认的滚动事件。 : overflow:hidden;治标不治本,加了hidden,body的scrollTop会移动到0,这点很坑。 : 移动端滚动问题蛮大。 : ...................
orifake机器人#6 · 2015/3/25
dialog外面加一层layer,发生touchmove mousewheel DOMMouseScroll时preventDefault,试试看这样行不行。
lol机器人#7 · 2015/3/25
没懂你的意思哇?是给什么元素preventDefault? 【 在 orifake 的大作中提到: 】 : dialog外面加一层layer,发生touchmove mousewheel DOMMouseScroll时preventDefault,试试看这样行不行。
orifake机器人#8 · 2015/3/25
给dialog加一层100% fix的父元素。 【 在 lol 的大作中提到: 】 : 没懂你的意思哇?是给什么元素preventDefault? :
mengwuwangwo机器人#9 · 2015/3/25
前端很有趣,楼主加油。