ios局部滚动的bug所引发的思考

jindong 发布于2019-08-29 11:32 / 2824人阅读

流畅的不要不要的ios出来的bug让人咬牙切齿。
bug产生的环境：局部滚动，外部并没有禁止默认浏览器事件
bug：导致局部滑动不流畅严重情况下不能滑动
解决方案:
1:js禁止外部的浏览器默认事件，停止局部事件冒泡（对于结构简单的页面来说可能适合）
2:-webkit-overflow-scrolling:touch给body和局部滚动的元素

-webkit-overflow-scrolling:touch 创建了带有硬件加速的系统级控件

但是呢，通过从网上的查看这个可能带来其他的bug，用js设置局部滚动的scrollTop的时候会出现空白，解决方案：

el.WebKitOverflowScrolling = "auto";
el.scrollTop = 500;
el.WebKitOverflowScrolling = "touch";

说到这里，贴上一些可以解决一些问题的css3的代码吧

*{
webkit-tap-highlight-color:rgba(0,0,0,0);//去掉点击高亮
-webkit-appearance: none;//消除输入框和按钮的原生外观
-webkit-user-select: none; //禁止页面文字选择，此属性不继承，一般加在body上规定整个body的文字都不会自动调整
-webkit-text-size-adjust: none; //禁止文字自动调整大小
-webkit-touch-callout:none; // 禁用长按页面时的弹出菜单(iOS下有效) ,img和a标签都要加
pointer-events: none;//禁止长按图片
}

还有fixed的bug，这个在布局上可以调整，规定body,html为100%*100%，position为relative；然后用一个div包括内容并设置position为absolute，overflow-y为auto，将要fixed的元素放到这个div外面设置position为absolute，这样就可以模拟了，但是这里在ios又会出现局部滚动问题，所以回去一开始的解决办法，总结为代码：

html,body {
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
    -webkit-overflow-scrolling:touch
}
.content {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:auto;
    overflow:auto;
    -webkit-overflow-scrolling:touch
}
.fixed-div {
    position:absolute;
    right:0;
    bottom:0;
}

公众号

我们的主页

云服务器 GPU云服务器人工智能的思考对人工智能的思考点所对应的数据机房租赁所需要具备的要求

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111715.html

ios局部滚动的bug所引发的思考

流畅的不要不要的ios出来的bug让人咬牙切齿。bug产生的环境：局部滚动，外部并没有禁止默认浏览器事件bug：导致局部滑动不流畅严重情况下不能滑动解决方案: 1:js禁止外部的浏览器默认事件，停止局部事件冒泡（对于结构简单的页面来说可能适合） 2:-webkit-overflow-scrolling:touch给body和局部滚动的元素 -webkit-overflow-scrolling...

ymyang 2019-08-01 15:57 评论0 收藏0
一个关于对象引用的bug引发的对于引用类型及数组的简单思考

摘要：图示如下而对于引用类型的复制可不是这样这个复制只是将的引用赋值给，二者是属于同一个引用，访问的都是堆内存中的同一个对象，任何一个该引用的变量发生变化，会对其余使用该引用的变量也发生变化。这两天自己在写代码的时候，出现一个BUG，代码如下： class Car { constructor(carId) { this.position =...

lijinke666 2019-08-21 18:32 评论0 收藏0
ios局部滚动的坑及解决方案

摘要：起因最近几天在写一个滚动加载更多数据的插件，为局部滚动写时，遇到了很多局部滚动的坑，在这里分享一下这些坑的解决方案。约定把产生滚动条的元素称之为视窗全局滚动滚动条在或者父级元素上。坑一浏览器局部滚动默认没有弹性滚动的效果。起因最近几天在写一个滚动加载更多数据的插件(Scrollload)，为局部滚动写demo时，遇到了很多局部滚动的坑，在这里分享一下这些坑的解决方案。以下的坑只针对...

yhaolpz 2019-08-20 13:41 评论0 收藏0
我是如何通过debug成功甩锅浏览器的：解决fixed定位元素，在页面滚动后touch事件失效问题

摘要：二分析排查一步骤一使用搜索引擎我是在无意中发现该问题的，当时观察到的现象是绑定在上的事件有时会被触发，有时会失效。这说明并不存在偶尔失效的问题。也就是说，我需要找到确切的令响应事件失效的原因。接下来的事很简单，继续搜索事件在页面滚动后失效。如果你关注我应该知道，我最近对PC端页面进行移动适配。在这个过程中，为了节省用户300ms的时间，同时给予用户更及时的点击反馈（这意味着更好的用户...

tulayang 2019-08-30 14:02 评论0 收藏0