-webkit-overflow-scrolling:touch;在本身没有滚动,动态加入内容撑大后不滚动的bug

使用weui 1.0开发时,项目列表的div在ajax填充后,页面无法滚动,真的伤脑筋啊!研究了好久终于解决了

When working with the overflow: scroll; attribute, the -webkit-overflow-scrolling: touch; attribute can be very useful on mobile sites. It basically changes the awkward scrolling behavior into the normal, expected behavior.

When you dynamically add content to a div with -webkit-overflow-scrolling: touch; that exceeds the div in height, it becomes broken and unscrollable. You can fix this by constantly having an inner div, that triggers the scrollbar because its 1px higher than the outer div:

.outer {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  /* More properties for a fixed height ... */
}

.inner {
  height: calc(100% + 1px);
}

更好的解决方案(不加div):

.outer:before {
            content:"";
            width: 1px;
            float: left;
            height: calc(100% + 1px);
            margin-left: -1px;
            display: block;

        }
        .outer:after{
            content:"";
            width: 100%;
            clear: both;
            display: block;
        }


你可能感兴趣的:(Jquery)