仿京东移动端分类页面解决ios滑动的卡顿问题（单页面双滚动条）_左亦然_新浪博客...

        在移动项目中遇到问题，单页面分左右两部分，分别可以滑动，类似于京东移动端的分类页面，右侧用定位fixed，左侧如果用relative定位或者不用定位的话可以实现滚动流畅，但是有问题是:滑动左边的部分照样会使右边滚动，而左侧用absolute进行定位，可实现单页面的双滚动条，彼此不影响。但是问题来了，这样写在安卓手机上是没有问题的，但是在ios手机上会出现滑动卡顿的问题，就是说手指滑动多少页面滚动多少，这样严重影响用户的体验效果。

解决办法：  -webkit-overflow-scrolling: touch;

     overflow-scrolling: touch;

在需要absolute的地方加上上面的这句话即可，这是安卓和ios都支持的css3的新属性。

具体代码如下：

（原始版：）

css设置：

.mainport-left {

width: 26.5%;

height: 100%;

background: #ececec;

position: absolute;

display: inline-block;

overflow-y: scroll; 

float: left;

}

.mainport {

width: 73.5%;

height: 100%;

background: #fff;

position: absolute;

right:0;

padding: 0.21rem .2rem 0 .2rem;

margin-bottom: 0;

border-bottom: none;

overflow-y: scroll; 

}

（修改版：）

css设置

.mainport {

    width: 73.5%;

    height: 100%;

    background: #fff;

    position: absolute;

    right: 0;

    float: right;

    padding: 0.21rem .2rem 0 .2rem;

    margin-bottom: 0;

    border-bottom: none;

    overflow-y: scroll;

    -webkit-overflow-scrolling: touch;

    overflow-scrolling: touch;

    z-index: 190;

}

.mainport-left {

    width: 26.5%;

    height: 100%;

    position: fixed;

    z-index: 100;

    -webkit-overflow-scrolling: touch;

    overflow-scrolling: touch;

    background: #ececec;

    display: inline-block;

   

    overflow-y: scroll;

    float: left;

}