移动端分页列表，在ios上滚动加载分页时候，使用scrollTop，会引起白屏问题。
看不少文章说是使用了-webkit-overflow-scrolling: touch;引起的硬件加速问题。亲测删除问题仍然存在。
|
1 2 3 4 5 |
this.$nextTick(() => { window.scrollTo(0, 1); window.scrollTo(0, 0); }) |
|
1 2 3 4 5 6 7 8 9 |
#app { -webkit-overflow-scrolling: touch; } #app > * { transform: translateZ(0px) -webkit-transform: translateZ(0px) } |
以上两种方法都试过，不起作用。
将-webkit-overflow-scrolling先设置成auto再设成touch的方案，同样不起作用。
最终使用一个简单粗暴方案解决：
先this.$refs.chat.style = display: none;再
setTimeout(() => {
this.$refs.chat.style =
this.$refs.chat.scrollTop = 100000;
}, 0)
this.$refs.chat.style =
display: block;this.$refs.chat.scrollTop = 100000;
}, 0)
使整个滚动区域回流，白屏问题解决。
但是这个方案有两个缺点：
一、电脑上会出现明显闪烁的问题，ios上不明显。
二、如果在dom上使用了变量的形式动态配置样式，在display:none;后会失效，需要在display:block;的同时处理。
