1. 首页
  2. Language
  3. 笔记 分析 – 纯CSS实现的滚动指示器效果 (张鑫旭博文)

笔记 分析 – 纯CSS实现的滚动指示器效果 (张鑫旭博文)

原文传送门
MDN background-size
MDN mix-blend-mode
MDN pointer-events
MDN linear-gradient
MDN length 说明 vh单位

效果简单描述一下

网页顶部，有滚动指示器； 当页面在顶部的时候，指示器显示的是空白；当页面在最底部的时候，指示器显示是百分百。

css Api

  • pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。 [默认值] auto
  • background-size 设置背景图片大小。
  • mix-blend-mode CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。[默认值] normal
  • linear-gradient CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

实现思路分析
样式类 .indicator
1）绝对布局
2）针对页面左下角三角形区域，上一个背景色 (直白：画个大三角形)
3）伪元素::after 背景色为白色，结合 mix-blend-mode 颜色混合模式，控制要显示的区域 (起到遮挡蒙版的作用)
4) 调整背景图的位置，让显示区域只在，页面底部的时候 能显示背景图的最下方 (采用了vh 可视窗百分比）
5）用过css样式屏蔽 鼠标选中等事件；虽然遮挡了，但是可以透传事件；(透明的感觉)
*) 尝试实验的时候，可以注释掉 ::after 的背景色

直接上代码

<style>
body {
    position: relative;
}
.indicator {
    position: absolute;
    top: 0; right: 0; left: 0; bottom: 0;
    /* 画三角形背景: 从左下 -> 到右上， 渐变颜色 各占50%区域 */
    background: linear-gradient(to right top, teal 50%, transparent 50%) no-repeat;
    /* 第一个值指定图片的宽度，第二个值指定图片的高度 */
    background-size: 100% calc(100% - 100vh);
    z-index: 1;
    /*
      元素永远不会成为鼠标事件的target。
      但是，当其后代元素的pointer-events属性指定其他值时，
      鼠标事件可以指向后代元素，
      在这种情况下，
      鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。
    */
    pointer-events: none;
    /* 背景混合模式为 darken(变暗) */
    mix-blend-mode: darken;
}
.indicator::after {
    content: '';
    position: fixed;
    top: 5px; bottom: 0; right: 0; left: 0;
    background: #fff;
    z-index: 1;
}
</style>
<!-- 在<body>标签内插入指示器元素 -->
<div class="indicator"></div>