javascript - 找出带有位置 : fixed element on iOS 8 的无缝滚动

Question

我需要实现的可以在this demo上看到.

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

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

我自己的方法是通过 onscroll 处理程序重新定位 clip: rect area on a position: fixed background image。有点像在图像上四处移动蒙版。 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)";

如果在重新定位剪辑时没有延迟，我会很高兴:rect area;如果您在任何 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);
}

最后，我们将内容作为剪辑元素的子元素。它被设置为固定位置，但只会呈现在父边界框定义的 clip-rect 区域中。

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

---

这是上面的一个片段，它只使用了 css。

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;这将为您提供与上述代码相同的结果。