html - 如何在 Safari 移动版 (iPad) 上正确滚动？

Question

我需要以一种简单的方式处理水平和垂直滚动，这通常适用于 Safari 移动设备和特定的 iPad。

我有一个非常简单的 HTML/CSS 框架，我希望它保持非常简单，如下所述。

找到 related fiddle here .

水平滚动条

不幸的是，这需要我根据内容计算滚动条的宽度。有自动方式吗？

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 太多了。我用我移动/删除的属性更新了你的 fiddle 。

我从 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;
}

这是 the fiddle .