手机微信使用scrollTop会闪烁?

在做一个微信的功能,同一个HTML上有Record页面(列出一些记录)和Detail页面(记录的详细内容),一开始用户查看Record页面(记录有时比较多,会出现滚动条),然后点击其中一条记录,就会隐藏Record页面显示Detail页面,这个过程还用了hash去控制两个页面,其实就是怕用户在Detail页面里进行“返回”操作时会退出整个页面。因为用了hash,所以用户进行“返回”操作就会显示Record页面隐藏Detail页面。
现在有个问题,就是在进入Detail页面前,我用var scrollTop=$(window).scrollTop();保存了用户进入Detail页面前的位置,当用户进行“返回”操作后,我就设置$(window).scrollTop(scrollTop); 保证用户返回后还是在原来的位置。
因为设置滚动条位置$(window).scrollTop(scrollTop); 需要先把Record页面show()出来才能设置,所以在手机上看的时候会像闪烁了一下的样子,比较难看,试了比较多方法都不行,各位前辈有什么好建议吗?

阅读 5.6k
4 个回答

提供一种思路:

首先,要确定是单纯show()出现了闪烁还是因为设置滚动条位置scrollTop()才闪烁;
其次,如果是因为设置滚动条位置scrollTop()才闪烁,你可以考虑Record页面不隐藏而是重叠在Detail页面下,先设置滚动条位置scrollTop()回到纪录位置后,再隐藏Detail页面,就会凸显Record页面了。

*这只是想到的思路需要你试试哈

要不要试试将$(window).scrollTop(scrollTop) delay个半秒执行呢?

用timeline去录之前那种返回时重新定位滚动条的方法,发现确实丢帧很严重,查了很多资料,是说这种搞法会重绘整个页面导致很卡。于是我就想,我把列表页绝对定位然而给个z-index,弄他在详情页的上面,用visibility去控制他们的显示和隐藏(之前用display:none,也会重绘原来),这样的话,就不用重新定位了。后来试试确实可以了,还有些小毛病就是,因为列表页在详情页上面,所以在详情页时滑动的话,返回后会发现列表页也滑动了……
我最后的解决方法是:Record页面绝对定位,然后用visibility:hidden加top:-999em来隐藏页面,使得它无法点击且不占据位置。这跟display:none有巨大区别,这样是不用重绘页面的!所以根本就不用重新去定位滚动条,只是单纯显示隐藏。

新手上路,请多包涵

history.replaceState

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题