如何在Safari移动版（iPad）上正确滚动？

我需要以一种简单的方式处理水平和垂直滚动，这对一般的Safari移动设备和iPad来说都是特别的。

我有一个非常简单的HTML / CSS框架，我想保持非常简单的描述如下。

在这里find相关的小提琴 。

水平卷轴

不幸的是，这需要我计算滚动条的宽度，这取决于内容。 有没有自动的方法？

HTML如下所示：

<div class="scrollerContainer hScrollable"> <div class="scroller"> <div id="photo1"></div> <div id="photo2"></div> <div id="photo3"></div> <div id="photo4"></div> <div id="photo5"></div> <div id="photo6"></div> <div id="photo7"></div> <div id="photo8"></div> <div id="photo9"></div> </div> </div> 

和相关的CSS如下：

 .hScrollable { overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; white-space:nowrap; } scrollerContainer { -webkit-box-sizing: border-box; width: 100%; height: 50px; margin: 0; border: solid 1px black; } .scroller { -webkit-box-sizing: border-box; margin: 0; padding: 4px; white-space: nowrap; overflow: hidden; /* Really important to avoid vertical scrolling on devices */ width: 100%; height: 50px; background-color: lightgray; } .scroller>div { width: 50px; height: 50px; display: inline-block; } 

垂直滚动

我想要内容填充父容器，并超过垂直大小，垂直滚动。

HTML如下所示：

 <div id="container" style="height:400px"> <div style="height:100px"> Fixed content, I dont want to vscroll </div> <div class="tabContent"> Potentially long content that should vscroll. This div should fill to the end of the container. I don't want to set its height to 300px, but to find a way it does automatically. </div> </div> 

Answer 1

你有太多的CSS在那里发生。 我更新你的小提琴与我移动/删除的属性。

我从CSS中删除了.hScrollable和.scrollerContainer ，并将溢出属性添加到.scroller 。

所以.scroller现在看起来像这样：

 .scroller { -webkit-box-sizing: border-box; margin: 0; padding: 4px; width: 100%; background-color: lightgray; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; white-space:nowrap; } 

这是小提琴 。