想象一个可以水平滚动的div,其中包含两个可垂直滚动的div。
您应该水平滚动以导航,然后在内部的div中垂直滚动以阅读内容。
/* MINIMAL RESET */
body, html {
height: 100%;
margin: 0;
padding: 0;
}
* { box-sizing: border-box; }
<div style="
overflow-x: scroll;
white-space: nowrap;
width: 100%;
height: 100%;
position: relative;
background-color: black;
">
<div style="
width: 100%;
height: 100%;
left: 0%;
top: 0px;
margin: 0px;
position: absolute;
display: inline-block;
background-color: green;
">
<div style="
width: 100%;
height: 100%;
overflow-y: scroll;
">
<div style="
width: 100%;
height: 200%;
">
</div>
</div>
</div>
<div style="
width: 100%;
height: 100%;
left: 100%;
top: 0px;
margin: 0px;
position: absolute;
display: inline-block;
background-color: blue;
">
<div style="
width: 100%;
height: 100%;
overflow-y: scroll;
">
<div style="
width: 100%;
height: 200%;
">
</div>
</div>
</div>
</div>
在查看这个问题后,我发现可以设置-webkit-overflow-scrolling : 'touch'
,但在我的情况下,由于在滚动结束时操作水平滚动条,因此在此情况下触摸滚动会导致它失效。
以下示例在Chrome上和Android上的Chrome都可以正常工作,但是在iOS上,由于输入框的焦点始终传递到垂直滚动条上,因此无法进行水平滚动。
如何使iOS的水平和垂直div都可滚动,以使其与Chrome中的工作方式相同?