.main {
display: block;
overflow: auto;
height: 100%;
padding: 0.86rem 0 1.14rem 0;
-webkit-overflow-scrolling: touch;
}
<section class="uploadPhoto main">
<div class="main_inner">
<!--滚动内容区-->
</div>
</section>
<div class="footerMenu">
<!--底部内容-->
</div>
这时候的底部虽然会定位在底部,但是当滑动到底部后,会造成 .footerMenu 出现fixed定位错位, .footerMenu将不会在定位在底部。因为 .main 已经设置了100%又设置了padding,造成内容超出,所以出现这问题,那么如何解决呢?
.main {
display: block;
overflow: auto;
height: 100%;
/*padding: 0.86rem 0 1.14rem 0;*/
-webkit-overflow-scrolling: touch;
}
/*消除滚动条*/
.main::-webkit-scrollbar{
width: 0;
height: 0;
}
.main .main_inner {
padding: 0.86rem 0 1.14rem 0;
}
如果 .main 设置的padding改成 .main_inner 设置padding,那么自然就解决了,顺便一提
在移动端iOSH5页面中的滚动有可能会初心卡顿的现象,那么上文中的
{
-webkit-overflow-scrolling: touch;
}
就是用于解决卡顿的问题,实现了回弹