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)";

如果在重新定位剪辑时没有延迟，我会对此感到满意：rect area;如果你在任何iOS 8上进行测试都可以看到它（当你在显示图像的区域周围滚动/上下滑动时会有轻微的延迟）。无法克服这一点，并且害怕它的设计。

编辑：请注意我需要在显示区域上方和下方显示内容，透明;所以透明背景可以让你看到页面的背景;不能搞砸上下任何东西。

Answer 1

我已经删除了您链接到基本要素的演示，其中似乎有三个重要元素，一个容器，一个用于裁剪，第三个用于内容。

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

＆＃34;容器＆＃34;根据文本定义要使用的区域;

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

clip元素是有趣的地方。它是为了填充父级而设置的，这使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-element的子元素。它被设置为固定位置，但只会在父项的边界框定义的剪辑区域中呈现。

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

这是上面仅使用css的片段。

＆＃13;

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

＆＃13;

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

＆＃13;

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

找出无缝滚动w / position：iOS 8上的固定元素

1 个答案: