[英]CSS - Element with visibility:hidden doesn't scroll
I have a wrapper and an inner-wrapper as a child element of the wrapper. 我有一个包装器和一个内部包装器作为包装器的子元素。 The inner-wrapper should scroll inside the wrapper and should have visibility hidden.
内部包装器应在包装器内部滚动,并且应隐藏可见性。
This works fine in computer browsers. 在计算机浏览器中可以正常工作。 However, the inner wrapper doesn't scroll when I open the page in a mobile browser.
但是,当我在移动浏览器中打开页面时,内部包装器不会滚动。
What is the problem? 问题是什么?
HTML: HTML:
<div id="wrapper">
<div id = "inner-wrapper">
<div id = "circle"></div>
<div id = rectangle></div>
</div>
</div>
<button>
button
</button>
CSS: 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;
}
https://jsfiddle.net/934v8g69/ https://jsfiddle.net/934v8g69/
You may consider using the following property: 您可以考虑使用以下属性:
-webkit-overflow-scrolling: touch;
Also be sure to set: 另外请确保设置:
overflow:scroll;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.