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

最新推荐文章于 2020-05-25 14:49:18 发布

翻译最新推荐文章于 2020-05-25 14:49:18 发布 · 4.2k 阅读

Jquery 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种在使用weui1.0开发过程中遇到的问题：通过ajax动态填充内容后导致页面无法滚动。文章提供了两种解决方案：一种是通过嵌套内外div的方式，另一种则是利用伪元素来实现。

使用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;
        }