iOS 上的 Momentum 滚动（-webkit-overflow-scrolling）带走了所有其他东西答案

【问题标题】：Momentum scrolling on iOS (-webkit-overflow-scrolling) takes everything else with itiOS 上的 Momentum 滚动（-webkit-overflow-scrolling）带走了所有其他东西
【发布时间】：2014-11-21 02:38:32
【问题描述】：

我正在使用this article 中的技术为元素添加动量/间隔滚动。

html:

<h1>My title</h1>
<div class="container">
  <div class="cause">
    <div class="cause-content">
      <h2>things</h2>
    </div>
  </div>
  <div class="cause">
    <div class="cause-content">
      <h2>things</h2>
    </div>
  </div>
    <div class="cause">
    <div class="cause-content">
      <h2>things</h2>
    </div>
  </div>
  <div class="cause">
    <div class="cause-content">
      <h2>things</h2>
    </div>
  </div>  
  <div class="cause">
    <div class="cause-content">
      <h2>things</h2>
    </div>
  </div>  
  <div class="cause">
    <div class="cause-content">
      <h2>things</h2>
    </div>
  </div>  
  <div class="cause">
    <div class="cause-content">
      <h2>things</h2>
    </div>
  </div>  
  <div class="cause">
    <div class="cause-content">
      <h2>things</h2>
    </div>
  </div>  
</div>

CSS：

body{
  overflow: hidden;
}

.container{
  margin-top: 5em;
  overflow-x: scroll;
  white-space: nowrap;
  width: 100%;
  height: 100%;
  -webkit-overflow-scrolling: touch;
}

.cause{
  /* prettify */
  background: blue;
  color: white;
  text-align:center;

  /* real shit */
  display: inline-block;
  width: 260px
}

这可行，但问题是它需要其他元素！我的标题随之滚动。即使我添加 position: fixed 也会发生这种情况（可能是因为 iOS Safari 不完全支持 fixed。

有没有人知道一种方法可以让惯性滚动正常工作，同时仍将其他元素放在正确的位置？

【问题讨论】：

标签： ios css safari mobile-safari css-position

【解决方案1】：

我通过使用代码in this pen 解决了这个问题。重要的位似乎是whitespace: no-wrap 位。

HTML：

<div class="wrapper">
  <a href="" class="internal">item 1</a>
  <a href="" class="internal">item 2</a>
  <a href="" class="internal">item 3</a>
  <a href="" class="internal">item 4</a>
  <a href="" class="internal">item 5</a>
  <a href="" class="internal">item 6</a>
</div>

CSS：

body {
  background-color: #333;
}
.wrapper {
  width: 320px;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  padding: 1rem;
  background-color: #ccc;
}

.internal {
  display: inline;
  background-color: wheat;
  &:nth-child(odd) {
    background-color: hotpink;
  }
}

【讨论】：