移动端中关于overflow的修复

发表于 | 分类于 | 阅读次数:

移动端在使用overflow-x:hidden属性时，如果直接加在body上无效，需将内容包裹在另一个div标签中，并且使用 overflow-x:hidden;postion:relative，两个属性，如：

1
2
3
4
5
6
<div style="overflow-x:hidden;position:relative">
    <section style="width:100%;height:100%">
    </seciton>
    <section style="tanslateX-100">
    </seciton>
</div>

1
2
3
4
5
6
7
8
9
10
11
<style>
.tanslateX-100{
    width:100%;
    height:100%;
    transform: translateX(100%);
    transition: all 0.5s;
    position: absolute;
    top: 50px;
    opacity: 1;
}
<style>