纯CSS检测滚动

纯CSS实现检测页面滚动位置并展示

/* 注册自定义属性 */
@property --scroll-position {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}
/* 属性值过渡动画 */
@keyframes scroll-variation {
    to {
        --scroll-position: 1;
    }
}
body::after {
    /* 滚动驱动过渡动画 */
    animation: scroll-variation 1s linear;
    animation-timeline: scroll();
    /* CSS计数器显示属性值 */
    position: fixed;
    right: 0px;
    bottom: 6px;
    font-size: 12px;
    padding: 3px 6px;
    border-radius: 10px 0px 0px 10px;
    color: #fff;
    background-color: rgba(66, 66, 66, 0.1);
    backdrop-filter: blur(6px);
    counter-reset: scroll-position calc(var(--scroll-position) * 100);
    content: counter(scroll-position) "%";
    /* 属性值为零收起显示 */
    transform: translateX(100%) translateX(calc(var(--scroll-position) / var(--scroll-position) * -100%));
    transition: transform 0.2s;
}