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

流畅的不要不要的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;
}

公众号

BigCan

我们的主页

猜你喜欢