找出带位置的无缝滚动：iOS 8 上的固定元素

Question

我需要达到的目标可以在this demo看到。

基本上是一个带有矩形区域的页面，您可以通过向下滚动到达该区域，其中的内容看起来好像是一个位置：固定元素。在上面的演示中，显示的内容是通过 iframe 显示的页面 - 我很满意只是一张图片。

我只需要它在 iOS 8 上工作。据我所知，演示是通过一些自定义滚动机制来实现的。我怀疑他们以某种方式完全覆盖了滚动 - 尽管我无法确认它是像 iScroll 这样的自定义滚动框架。

我自己的方法是通过 onscroll 处理程序重新定位剪辑：在位置：固定背景图像上的矩形区域。有点像在图像上移动蒙版。 Example here

我在我的 JS onscroll 处理程序中使用的代码来重新定位剪切矩形：

topY = adDiv.getBoundingClientRect().top + window.pageYOffset - adDiv.ownerDocument.documentElement.clientTop;
scrollT = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
newY = topY - scrollT;
newHeight = rectHeight + newY;
document.getElementById("bgImg").style.clip = "rect("+newY+"px,1900px,"+newHeight+"px,0px)";

如果在重新定位剪辑时没有延迟，我会很高兴：矩形区域；如果您在任何 iOS 8 上进行测试，您就可以看到它（当您在显示图像的区域上下滚动/滑动时会有轻微的延迟）。无法克服这一点，并担心这是设计使然。

编辑：请注意，我需要将显示区域上方和下方的内容透明化；所以有一个透明的背景，可以让你看到页面的背景；上面和下面都不能乱七八糟。

Answer 1

我已将您链接的演示剥离到基本要素，其中似乎有三个重要元素，一个容器，一个用于剪辑，第三个用于内容。

<div class="container">
  <div class="clip-box">
      <div class="content">
          ...
      </div>
   </div>
</div>

“容器”根据文字定义了要使用的区域；

.container {
    position: relative;
    width: 100%;
    height: 10em;
}

剪辑元素是有趣的地方。它是用来填充父元素的，这使得clip: rect(auto ... auto) 在其边缘剪辑元素（因此它也是子元素）。将此元素设置为position: absolute 或position: fixed 很重要，因为裁剪仅适用于绝对定位的元素。

.clip-box {
    position: absolute;
    left: 0;
    top: 0;
    width:100%;
    height:100%;
    clip: rect(auto auto auto auto);
}

最后，我们将内容作为剪辑元素的子元素。它设置为固定位置，但只会在父母边界框定义的剪辑矩形区域中渲染。

.content {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    margin: 0;
}

---

这是上面的一个只使用 css 的 sn-p。

body {
  background-image: url("http://lorempixel.com/500/500/");
  background-size: cover;
  color: #FFF;
  margin: 0;
  text-align: center;
}
img {
  width: 100%;
}
.content p {
  position: absolute;
  top: 0;
  left: 0;
  text-align: left;
}
.window {
  position: relative;
  width: 100%;
  height: 10em;
}
.clip-box {
  position: absolute;
  left: 0;
  top: 0;
  width:100%;
  height:100%;
  clip: rect(auto auto auto auto);
}
.content {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
}

<p>
  Lorem ipsum
  <br>dolor sit amet,
  <br>consectetur adipiscing elit.
  <br>Morbi convallis
  <br>accumsan neque,
  <br>eu accumsan magna
  <br>laoreet cursus.
  <br>Etiam feugiat mattis
  <br>nunc eget luctus.
  <br>Proin vel dictum est.
  <br>Nullam suscipit quam
  <br>at ullamcorper vestibulum.
  <br>Lorem ipsum
  <br>dolor sit amet,
  <br>consectetur adipiscing elit.
  <br>Curabitur rutrum
  <br>elementum ligula,
  <br>suscipit sodales
  <br>nisl convallis a.
</p>
<div class="window">
  <div class="clip-box">
    <div class="content">
      <img src="http://lorempixel.com/500/400/">
      <p>
        Lorem ipsum
        <br>dolor sit amet,
        <br>consectetur adipiscing elit.
        <br>Morbi convallis
        <br>accumsan neque,
        <br>eu accumsan magna
        <br>laoreet cursus.
        <br>Etiam feugiat mattis
        <br>nunc eget luctus.
        <br>Proin vel dictum est.
        <br>Nullam suscipit quam
        <br>at ullamcorper vestibulum.
        <br>Lorem ipsum
        <br>dolor sit amet,
        <br>consectetur adipiscing elit.
        <br>Curabitur rutrum
        <br>elementum ligula,
        <br>suscipit sodales
        <br>nisl convallis a.
      </p>
    </div>
  </div>
</div>
<p>
  Lorem ipsum
  <br>dolor sit amet,
  <br>consectetur adipiscing elit.
  <br>Morbi convallis
  <br>accumsan neque,
  <br>eu accumsan magna
  <br>laoreet cursus.
  <br>Etiam feugiat mattis
  <br>nunc eget luctus.
  <br>Proin vel dictum est.
  <br>Nullam suscipit quam
  <br>at ullamcorper vestibulum.
  <br>Lorem ipsum
  <br>dolor sit amet,
  <br>consectetur adipiscing elit.
  <br>Curabitur rutrum
  <br>elementum ligula,
  <br>suscipit sodales
  <br>nisl convallis a.
</p>

---

但是您应该注意clip 属性是deprecated，建议开发人员改用clip-path。不过，这是一项实验性技术，如果您只想使用图像，我建议您使用background-attachment: fixed;，这将为您提供与上述代码相同的结果。