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

问题描述

我需要以一种简单的方式处理水平和垂直滚动，这对一般的Safari移动和iPad来说都很有用。

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

找到。

水平卷轴

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

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; 
宽度：100％; 
 height：50px; 
保证金：0; 
 border：固体1px黑色; 
} 
 .scroller {
 -webkit-box-sizing：border-box; 
保证金：0; 
 padding：4px; 
 white-space：nowrap; 
 overflow：hidden; / *非常重要，以避免设备上的垂直滚动* / 
 width：100％; 
 height：50px; 
 background-color：lightgray; 
} 
 
 .scroller> div {
 width：50px; 
 height：50px; 
 display：inline-block; 
} 
  

垂直滚动条

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

HTML如下：

 < div id =containerstyle =height：400px> 
 
< div style =height：100px> 
固定内容，我不想vscroll 
< / div> 
< div class =tabContent> 
应该vscroll的潜在长内容。 
这个div应该填充到容器的末尾。 
我不想将它的高度设置为300px，
，但是要找到它自动执行的方法。 
< / div> 
 
< / div> 
  

解决方案

我更新了你的小提琴，我移动/移除了它的属性。

我删除了 .hScrollable 和 .scrollerContainer ，然后将溢出属性添加到 .scroller 。

因此 .scroller 现在看起来像这样：

  .scroller {
 -webkit-box-sizing：border-box; 
保证金：0; 
 padding：4px; 
宽度：100％; 
 background-color：lightgray; 
 overflow-x：scroll; 
 overflow-y：hidden; 
 -webkit-overflow-scrolling：touch; 
 white-space：nowrap; 
} 
  

这里是。

I need to handle both horizontal and vertical scrolling in a simple way, that works on Safari mobile in general and iPad in peculiar.

I have a very simple HTML/CSS framework which I wanted to keep very simple described as follows.

Find the related fiddle here.

Horizontal scroller

Unfortunately, this requires I compute the width of the scroller, depending on the content. Is there an automatic way?

The HTML is as follows:

       <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>

And the related CSS as follows:

.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;
}

Vertical scroller

I'd like the content to fill the parent container, and is exceeding the vertical size, scroll vertically.

The HTML is as follows:

<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>

解决方案

You had a bit TOO much css happening in there. I updated your fiddle with the properties I moved/removed.

I removed .hScrollable and .scrollerContainer from the css and added the overflow properties right to .scroller.

So .scroller now looks like this:

.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;
}

Here's the fiddle.

这篇关于如何在Safari移动版（iPad）上正确滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！