找出无缝滚动瓦特/位置：固定元素在iOS 8上 [英] Figure out seamless scrolling w/ position: fixed element on iOS 8
问题描述
我可以在此演示上看到我需要实现的内容。
基本上是一个带有矩形区域的页面，通过向下滚动可以看到内容，其内容看起来像是一个位置：固定元素。在上面的演示中，显示的内容是通过iframe显示的页面 - 我只对图像感到满意。
我只需要这个在iOS 8上工作。从我所看到的，演示通过一些自定义滚动机制来完成。我怀疑他们已经完全覆盖滚动 - 尽管我不能确认它是像iScroll这样的自定义滚动框架。
我自己的方法是重新定位剪辑：rect一个位置上的区域：固定的背景图像，通过onscroll处理程序。有点像在图像上移动蒙版。 示例
我使用的代码在我的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的任何东西（当你在显示图像的区域上下滚动/上下滑动时会有一些延迟）。无法克服这一点，并担心它是通过设计的。
编辑：请注意我需要有显示区域上方和下方的内容，透明;所以透明背景可以让你看到页面的背景;
我已经剥离了与链接到的示例要点，其中似乎有三个重要元素，一个容器，一个用于裁剪，第三个用于内容。
< div class =container>
< div class =clip-box>
< div class =content>
...
< / div>
< / div>
< / div>
容器根据文本定义您想要使用的区域;
.container {
position：relative;
宽度：100％;
身高：10em;
}
剪辑元素是有趣的事情发生的地方。这是为了填充父元素，它使得剪辑：rect（auto ... auto）在其边缘处剪裁元素（因此也是子元素）。这个元素设置为 position：absolute 或 position：fixed 非常重要，因为剪裁仅适用于绝对定位的元素。
.clip-box {
position：absolute;
剩下：0;
top：0;
宽度：100％;
身高：100％;
clip：rect（自动自动自动自动）;
}
最后，我们将内容作为剪辑元素的子元素。它被设置为一个固定的位置，但只会在由父母的边界框定义的剪辑区域中呈现。
.content {
position：fixed;
宽度：100％;
身高：100％;
top：0;
剩下：0;
保证金：0;
以下是以上仅使用css。
body {background-image：url（http://lorempixel.com/500 / 500 /）; background-size：cover;颜色：#FFF;保证金：0; text-align：center;} img {width：100％;}。content p {position：absolute; top：0;左：0; text-align：left;}。window {position：relative;宽度：100％; height：10em;}。clip-box {position：absolute;左：0; top：0;宽度：100％;高度：100％; clip：rect（auto auto auto auto）;}。content {position：fixed;宽度：100％;身高：100％; top：0;左：0; margin：0;}
< p> Lorem ipsum dol sit sit a&&&conse conse conse conse el el el el el el el el el el el el < 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 suslamit quam< br>在ullamcorper vestibulum。 < br> Lorem ipsum< br> dolor sit amet，< br> consectetur adipiscing elit。 < br class =window>< br class =window>< br class =window> < div class =clip-box> < div class =content> < img src =http://lorempixel.com/500/400/> < p为H. Lorem ipsum dol sit sit a&&&conse conse conse conse el el el el el el el el el el el el < 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 suslamit quam< br>在ullamcorper vestibulum。 < br> Lorem ipsum< br> dolor sit amet，< br> consectetur adipiscing elit。 < br> Curabitur rutrum< br>元素lig，，suscipit sodales< br> nisl convallis a。 < / p为H. < / DIV> < / DIV>< / DIV>< p为H. Lorem ipsum dol sit sit a&&&conse conse conse conse el el el el el el el el el el el el < 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 suslamit quam< br>在ullamcorper vestibulum。 < br> Lorem ipsum< br> dolor sit amet，< br> consectetur adipiscing elit。 < / p>< / code>< / pre>< / div>< br> 财产是弃用，建议开发人员使用 clip-path 代替。这是一项实验性技术，但如果您只想使用图片，我建议您使用 background-attachment：fixed; 它会给你与上面的代码相同的结果。
What I need to achieve can be seen on this demo.
Basically a page with a rectangle area that you reach by scrolling down, where there's content that appears as if it were a position: fixed element. In the demo above, the revealed content is a page displayed through an iframe - I'm happy with just an image.
I only need this to work on iOS 8. From what I can see, the demo does it through some custom scrolling mechanism. I suspect they have somehow overwritten scrolling altogether - although I can't confirm it's a custom scrolling framework like iScroll.
My own approach was to re-position a clip: rect area on a position: fixed background image, through a onscroll handler. Sort of like moving a mask around, on an image. Example here
The code I use in my JS onscroll handler to re-position the clipping rectangle:
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)";
I'd be happy with this if there weren't for a delay while re-positioning the clip: rect area; you can see it if you test on anything iOS 8 (there is a slight delay when you scroll/swipe up and down around the area that reveals the image). Wasn't able to overcome this and fear it's by-design.
EDIT: please note I need to have the content that is above and below the reveal area, see-through; so with a transparent background that would allow you to see the page's background; can't mess with anything above and below.
解决方案 I've stripped the demo you linked down to the essentials, in which there seems to be three elements of importance, one container, one which is used for the clipping, and the third for the content.
<div class="container">
<div class="clip-box">
<div class="content">
...
</div>
</div>
</div>
The "container" defines the area you want to use in line with the text;
.container {
position: relative;
width: 100%;
height: 10em;
}
The clip-element is where the interesting happens. It's made to fill the parent, which makes the clip: rect(auto ... auto) clip the element (and therefore also it's children) at its edges. It's important that this element is set position: absolute or position: fixed, as clipping only applies to absolutely positioned elements.
.clip-box {
position: absolute;
left: 0;
top: 0;
width:100%;
height:100%;
clip: rect(auto auto auto auto);
}
Lastly we have the content as a child of the clip-element. It is set to a fixed position but will only render in the clip-rect area defined by the parents’ bounding-box.
.content {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin: 0;
}
Here's a snippet of the above which uses only 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>
You should however note that the clip property is deprecated and developers are advised to use clip-path instead. This is an experimental technology though and if you're only wanting to use images anyway I'd recommend using background-attachment: fixed; which will give you the same result as the code above.
这篇关于找出无缝滚动瓦特/位置：固定元素在iOS 8上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
