您的位置:首页 > 其它

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

2017-03-11 14:59 393 查看
使用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;
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: