iPhone mobile safari fixed 元素滚动慢的问题处理

时间：2022-09-02 15:01:37

最近做一个手机阅读应用，抓取网站数据，做格式化后，适合手机浏览器以及电脑上阅读，不显示任何其他内容无关元素。

Site：http://cbread.duapp.com/

固定左侧边栏时，使用的CSS如下：

#listWrapper {

  height:100%;

  width:90%;

  left: 0;

  top: 0;

  z-index:-1;

  -webkit-transition: visibility 0s linear 0.2s;

  transition: visibility 0s linear 0.2s;

  position:fixed;

  overflow-x:hidden;

  overflow-y:auto;

  background-color:#DFDDD9;

  visibility:hidden;

  text-shadow: #FAFAF9 0 1px 0;

}

#listWrapper.show{

  visibility:visible;

  z-index:1;

  -webkit-transition: z-index 0s linear .2s;

  transition: z-index 0s linear .2s;

}

 

但是发现固定元素（position:fixed）内部的列表滚动时，在iphone 上性能非常差，简直不可接受，需要考虑其他解决方案

一种是在显示时将该元素position属性改为其它的比如absolute，性能立马提高，但是样式切换来切换去会影响动画性能，而且左右两边的滚动位置会互相影响。

 

第二方案是使用

-webkit-overflow-scrolling: touch;

列表滑动性能还可以接受，但是有个问题，在ipad iOS 5.1 上面貌似划不动…目前还没有找到替代方案。

 

第三个方法是使用iScroll插件，滚动时可以了，但是滚动性能不够好，而且这个还会造成其它问题，放弃。

 

 

目前使用的是方案二，再继续找更好的解决方法…

相关文章