我有一个包装器和一个内部包装器作为包装器的子元素。内部包装器应该在包装器内部滚动并且应该隐藏可见性。
这在计算机浏览器中运行良好。但是,当我在移动浏览器中打开页面时,内部包装器不会滚动。
问题是什么?
HTML:
<div id="wrapper">
<div id = "inner-wrapper">
<div id = "circle"></div>
<div id = rectangle></div>
</div>
</div>
<button>
button
</button>
CSS:
#wrapper{
position: fixed;
top: 0px;
width: 1px;
height: 200px;
z-index: 99999999;
}
#inner-wrapper{
width: 300px;
height: 200px;
overflow: auto;
z-index: 99999999;
}
#circle{
height: 300px;
width: 300px;
border-radius: 100%;
background-color: black;
z-index: 99999999;
}
#rectangle{
margin-top: 100px;
height: 200px;
width: 300px;
background-color: red;
z-index: 99999999;
}
button{
z-index: 1;
background-color: white;
}
最佳答案
您可以考虑使用以下属性:
-webkit-overflow-scrolling: touch;
另外一定要设置:
overflow:scroll;
关于javascript - CSS - 可见性为 :hidden doesn't scroll 的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42093433/