处理ios的overflow滚动bug

Posted AlexCZL

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了处理ios的overflow滚动bug相关的知识,希望对你有一定的参考价值。

先说说这个bug的场景

.container{
     height:100vh;
     overflow-y:scroll;  
}

没毛病,总有这种类似的情况,需要在容器内滚动,但是!这种容器内的滚动在ios上面处理的情况是类似于

-webkit-overflow-scrolling:auto;

什么意思?

就是滑动的时候,当手离开屏幕的那一刻,滚动立即停止(from MDN)

那网上也给出对应的解决方案就是在容器上设置一个

-webkit-overflow-scrolling:touch;

这种情况的话可以保证滚动流畅了。

但是!!!经常出现各种滚不动、卡死之类的,体验超级不好。

虽然网上也有给出各种解决方案

{
     height:calc(100%+1px);
     z-index:1;
}

但是。。。。然并卵,没用

=================================================================================

大爷不伺候了,那些要处理滚动事件什么的我还是绑到body上。。。

 

以上是关于处理ios的overflow滚动bug的主要内容,如果未能解决你的问题,请参考以下文章

iOS safari浏览器上overflow: scroll元素无法滚动bug深究

css overflow:scroll改为overflow:hidden时IOS闪烁bug

ios上-webkit-overflow-scrolling与position的bug

ios滚动条不起作用

Iphone 6s overflow bug

[BUG]ios中input不回弹,导致fixed布局错位