iphone6 7的元素内滚动卡顿
最近做的一个需求有一个排行榜是在一个限高的元素内手动滚动➕下拉加载展示。提测后报了个bug是在iphone6，7下滚动会很“卡”。
一开始以为是机型太老性能不好导致的。后来一看发现是没有一般滚动的滚动回弹效果，即手指滑动后离开屏幕，页面还会滚动一段距离。而是手指滚动多少，元素就往上滑多少。查了一下发现原来是在iphone6,7下需要添加一个css属性：
{
-webkit-overflow-scrolling: touch
}
这个属性控制元素在移动设备上是否使用滚动回弹效果，默认指为auto，即滑动多少滚动多少。touch就是使滚动有回弹效果，使滚动在滑动结束后有继续移动一段距离的效果。
在以为问题解决了之后，测试又报了一个问题，往下滚动到最后一页数据，再往上滚动，会发现排行榜的头像图片都加载不出来。推测是滚动到下面后往上拉图片无法被重新渲染导致到。
试了一下午，一开始以为是数据量太大到问题，但发现数据只有10条也会有这个问题。
打算使用better-scroll这个滚动库，虽然滚动不会出现图片无法加载的问题，然而发现他的滚动下拉加载竟然还需要另一个插件配合，让我觉得很有可能为了解决一个问题而引入更多的问题。
终于在吃晚饭的时候想到，如果图片无法加载出来，为什么不试试把图片当作背景图片加载呢？于是试着把图片用内联的方式设为了background-image解决了：
<div style="{ backgroundImage: `url(${avatar})` }"></div>
虽然解决方法简单，但是着实折腾了一下午。知道了原来ios11,12下有这种滚动的问题。因为之前做内元素滚动都是小弹窗下，且无图片的情况。所以没发现到这个问题。
参考资料：
overflow-scrolling解决滚动卡顿问题_JavaScript_chiuwingyan的博客-CSDN博客
网友评论