网页前端设计
文章热门排行随机文章推荐文章
解决ios手机页面overflow scroll滑动很卡的问题关注我吧
今天在系统上测试 web App的时候发现使用了position:fixed/absolute时，DIV容器里面下滑动没有像普通页面一样顺畅，手滑到哪就停到哪。感觉很卡一样，而安卓效果正常，算是一个。终于在网上找到了一个解决方法。
-webkit-overflow-scrolling:
加上去后果然有用，也就是说DIV容器使用的属性引起的。当时效果是弹出一个层，body无滚动条，但是弹出层需要可以上下滑动。如果你也碰到了这个问题希望可以用这一句代码帮到你！
大家有什么问题或技术上的想法可以在此与大家分享，也可以加入前端爱好者QQ群()一起学习进步：【解决ios手机页面overflow scroll滑动很卡的问题】
如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)
阅读全文内容后使用快捷导航没有帐号？
只需一步，快速开始
查看: 11254|回复: 4
android 手机版浏览器中滚动条失效的问题
UID587952在线时间 小时积分578帖子离线17386 天注册时间
高级会员, 积分 578, 距离下一级还需 422 积分
最近做了一个android手机的 web应用，生活查询的，碰到一个很郁闷的问题，搞了半天死活解决不了：我写的web页面，在电脑上的浏览器里一切正常(safari,遨游3都测过)，但到了手机上浏览就出错了
列车详细页面，我把页面高度和外层div高度固定了，让里面的内容溢出时出现滚动条（这是我的设计原意）；电脑上正常显示，手机上的浏览器里这个外层div的滚动条就失效了，内容溢出的部分直接没有了，就跟设置了overflow:一样，可我对外层div设置的属性明明是overflow:啊，我试过设为scroll也没用，彻底郁闷了....
这是我那个web应用的网址，查询页面，输入站点后出来结果列表，点击列表中的任意一个结果就到列车详细信息页了(也就是出问题的页面)，谁能帮我看下....
UID593424在线时间 小时积分6帖子离线17386 天注册时间
新手上路, 积分 6, 距离下一级还需 44 积分
哈哈哈，朋友，为了回答你的问题，我专门注册了一个号码，
以为，这是一个困扰我很久的一个问题，
不过就在刚刚，我已经解决了大概80%了
这个原因不是你的问题，而是手机自带的浏览器的问题
在ios上面，这个问题可以用双指来解决
希望能够和你聊一聊，可以跟我联系，或者加我QQ
[[i] 本帖最后由 mohen 于
15:56 编辑 ]
UID165779在线时间 小时积分2931帖子离线17386 天注册时间
银牌会员, 积分 2931, 距离下一级还需 69 积分
overflow:scroll can't use in mobile browser, no one support this now.
if you want to scroll in div, use iScroll or waiting for iOS 5.
UID215294在线时间 小时积分3015帖子离线17386 天注册时间
金牌会员, 积分 3015, 距离下一级还需 1985 积分
我也刚开始弄ipad的网站的，也是这样的问题，楼上，你说 用 iScroll 怎么用？
UID44970在线时间 小时积分51958帖子离线17386 天注册时间
这个应当是一个比较完美的解决方案，我也碰到过，按这个方法解决的。
Powered by问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
例如滚动白色弹出层时到底部时继续滚动就会使背景也滚动，怎么阻止比较好？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
height: 100%;
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
将不需要滚动的部分使用fixed定位，滚动的地方使用absolute定位；实现内部滚动
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
对局部需要滚动条的元素，尝试使用这个css属性：
-webkit-overflow-scrolling:
我之前解决类似的问题时参考过这篇文章：
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
lz这个问题解决了吗?
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
两种方法，1.设置body：fixed.2.设置body height:100%,设置body的子元素div高度100%，overflow：hidden
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
这个问题今天我也遇见了，网上查了半天没有一个靠谱的，所以自己琢磨了半天终于解决，操作如下： 当同时为html，body两标签都添加css样式：height: 100%;overflow:才能阻止body滚动条滚动，一般都会是动态添加样式，这样写就可以：
$('html').css("height":"100%","overflow":"hidden"});$('body').css({"height":"100%","overflow":"hidden"});启用设置： $('html').css({"overflow":"auto"});$('body').css({"overflow":"auto"});拿走不谢。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
阻止事件冒泡到document上
document.querySelector('.luckingboy').addEventListener('touchmove', function(e) {
e.stopPropagation();
或者这样写
document.addEventListener('touchmove', function (e) {
if (e.target.nodeName == '#document') {
e.preventDefault();
e.stopPropagation();
另外，ios微信浏览器内网页可以上下拖动，如要禁止，需要阻止touchmove的默认行为
document.addEventListener('touchmove', function(e) {
e.preventDefault();
但是，这样做，页面中需要滚动的div也就不能滚动了。可以使用iScroll来滚动！
该答案已被忽略，原因：
同步到新浪微博
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：}