Question

我对http://lifesocks.me/（使用JS和Skrollr）的'擦除滚动'功能很感兴趣，并希望尝试仅使用CSS实现它，而不会劫持本机滚动。

我设法得到了相当于90％的方式： http://codepen.io/iamkeir/pen/yJKJNG

html, body { height: 100%; }
a { color: white; }
a:hover { text-decoration: none; }

.slide {
  height: 100vh;
  position: relative;
  z-index: 1;
  font-size: 10vw;
  color: white;
  text-align: center;    
  overflow: hidden;
  backface-visibility: hidden;
}

.slide__inner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  overflow: hidden;
  backface-visibility: hidden;
}

.slide--1 { background: red; }
.slide--2 { background: blue; }
.slide--3 { background: green; }
.slide--4 { background: grey; }

<div class="slide slide--1">
  <div class="slide__inner"><a href="#test-1">Slide 1</a></div>
</div>

<div class="slide slide--2">
  <div class="slide__inner"><a href="#test-2">Slide 2</a></div>
</div>

<div class="slide slide--3">
  <div class="slide__inner"><a href="#test-3">Slide 3</a></div>
</div>

<div class="slide slide--4">
  <div class="slide__inner"><a href="#test-4">Slide 4</a></div>
</div>

还有两个问题：

1）背面可见性技巧似乎在Firefox或IE11 / Edge中不起作用，但我不确定原因。

2）由于z-index堆栈，您无法与之前幻灯片上的文本/链接进行交互，因为最后一张幻灯片基本上是“在顶部”。

关于2，我尝试使用JS将“当前”幻灯片放到z-index堆栈的顶部，但这很笨重 - 什么时候幻灯片'当前'，当它是半途中？

很高兴获得其他人对1中的错误和2的任何想法的输入。

修改

这是JS'焦点'功能的Codepen - 正如我所说，笨重！ http://codepen.io/iamkeir/pen/akxRwj

Answer 1

背面可见性“技巧”听起来像是Chrome / Webkit的错误。 overflow: hidden不应该应用于包含块在overflow: hidden元素之外的元素。

您正在寻找的效果可以使用clip属性来实现。 clip属性适用于所有后代，而不仅仅适用于包含块后代。有关示例，请参阅this BBC page。

不幸的是，由于clip属性仅适用于position: absolute元素，因此每张幻灯片需要三个元素。这是你如何做到的：

body { margin: 0; }
a { color: white; }
a:hover { text-decoration: none; }

.slide {
  height: 100vh;
  position: relative;
  font-size: 10vw;
  color: white;
  text-align: center;
}

.slide__wrapper {
  position: absolute;
  clip: rect(auto auto auto auto);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.slide__inner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.slide--1 { background: red; }
.slide--2 { background: blue; }
.slide--3 { background: green; }
.slide--4 { background: grey; }

<div class="slide slide--1">
  <div class="slide__wrapper"><div class="slide__inner"><a href="#test-1">Slide 1</a></div></div>
</div>

<div class="slide slide--2">
  <div class="slide__wrapper"><div class="slide__inner"><a href="#test-2">Slide 2</a></div></div>
</div>

<div class="slide slide--3">
  <div class="slide__wrapper"><div class="slide__inner"><a href="#test-3">Slide 3</a></div></div>
</div>

<div class="slide slide--4">
  <div class="slide__wrapper"><div class="slide__inner"><a href="#test-4">Slide 4</a></div></div>
</div>

Firefox / IE中的背面可见性错误（滚动擦除UI，如Life Socks）

1 个答案: