指示CSS页面上的滚动位置

滚动是我们在网上都知道并在网络上做的事情，以至于它是一种期望甚至习惯，例如刷牙。这可能就是为什么我们不太考虑设计滚动体验的原因 - 这是一个众所周知的基本功能。实际上，流行的“没有折叠”的话是从人们知道如何滚动的想法中出现的，并且没有人不会陷入困境的任意线。

基于卷轴的功能往往涉及CSS和JavaScript的一些定制混合物。那是因为根本没有那么多的本地功能可以做到这一点。但是，如果我们可以完成仅使用CSS的事情怎么办？

以CSS为例，以巧妙的水平滚动条为例。我想做类似的事情，但要指示滚动的部分，而不是捕获连续的滚动。换句话说，我只想在达到页面的某个部分时增加滚动过程中指示器的长度。

像这样：

这是我的计划：每个部分都带有一个无法检测到的指标，直到到达屏幕顶部为止。这就是通过更改颜色并坚持在视口顶部看到的地方。

相反的情况应该相反：当向后滚动滚动时，指示器将遵循，伪装回到肉眼未发现。

这有两个关键部分。首先是指示器在屏幕顶部附近时更改颜色。第二个是要使指示器保持在屏幕顶部，并且只有在将其部分向下滚动到屏幕上时才会下降。

第二个很容易做到：我们使用位置：粘性；关于我们的元素。滚动页面时，粘性元素会粘在其父容器内的屏幕上的给定位置。

这使我们变成了不断变化的颜色。由于HTML文档的背景默认为白色，因此我将白色作为演示的基本颜色。这意味着，当指示器在基本颜色上时，它应该看起来为白色，并在屏幕顶​​部的指示灯栏上转向其他颜色。

这是CSS混合模式发挥作用的地方。他们为我们提供了许多选择来创建各种颜色融合的选择。我要使用覆盖值。这本质上是动态的。我不会深入解释混合物（因为CSS-tricks Alamanac已经做得很好），但是考虑到此演示，我会说：当背景颜色为白色时，产生的前景颜色为白色；当背景是其他颜色时，所产生的颜色会更暗或更轻，具体取决于与之混合的颜色。

演示中的指示器停止是黑色的。但是，由于混合物，我们将它们视为白色，因为它们在白色背景上。当它们超过指示器容器元件（紫罗兰色的可爱阴影）时，我们会看到一个深紫色的指示器停止，因为我们将指示器停止的黑色与指示器容器的紫色混合在一起。

从HTML开始：

 <div>
 <strong>部分滚动↴</strong>
 
 <div> </div>
</div>



<div class="passageStops"> </div>



<div>
 
</div>



<div> </div>



<div>
 
</div>



<div> </div>



<div>
 
</div>

很简单，对吗？顶部有一个粘稠的容器，当它们到达顶部时，可以容纳指示器。从那里开始，我们有三个内容的内容，每个部分都带有一个指示器，该指示器将用指示器粘在顶部并与之融合。

这是CSS：

 .PassAgeStops {
 背景色：黑色； / *每个指示器停止都是黑色 */
 混合模式：覆盖； / *这使其在白色背景上显得白色 */
 宽度：33.3％； / *总共三个部分，因此每个部分为三分之一 */
 顶部：计算（1EM 3PX）;
}


＃通道， 
.PassAgeStops {
 身高：10px;
}


#passageWrapper，
.PassAgeStops {
 位置：粘性； / *容器和停止应粘在顶部 */
 z索引：1; / *确保指示器和停止保持在最前沿 */
}


#passage {
 背景：紫罗兰； / *将与黑色融合以制作较深的紫色指示器 */
 保证金：0 0 20px 0;
}


#passageWrapper {
 背景色：白色； / *确保我们正在使用White隐藏指示器停止 */
 身高：40px;
 顶部：0px;
}


/*每个站将在达到最后一部分时将指示器容器宽度的三分之一移动以覆盖整个物体。 */
。 }
。 }


/*更多样式，等等。 */

指示器（.PassAgeStops）是黑色的。但是，当覆盖层模式与其下面的白色背景融合时，它们使它们显得白色。由于有三个部分，因此每个指标宽度为三分之一。

指标具有位置：粘性；具有最高距离值。这意味着指示器一旦从屏幕顶部到达计算的位置就会粘贴。发生这种情况时，与紫罗兰色指示器容器相结合的黑色指示器使它们看起来是黑暗的紫罗兰色，代表页面上的新滚动位置。

反向也是正确的。当指示器失去其粘性位置时，它将从指示栏的紫罗兰背景移动到页面的白色背景，再次将其隐藏起来……就像它永远不会存在！

这再次是演示：

就是这样。您可以通过具有另一种混合模式的非白色背景或用于指示栏或停止的梯度来进一步实验。

以上是指示CSS页面上的滚动位置的详细内容。更多信息请关注PHP中文网其他相关文章！