纯CSS检测滚动

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

/* 注册自定义属性 */
@property --scroll-position {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}
/* 属性值过渡动画 */
@keyframes scroll-variation {
    to {
        --scroll-position: 1;
    }
}
body {
    /* 滚动驱动过渡动画 */
    animation: scroll-variation 1s linear;
    animation-timeline: scroll();
    &::after{
        /* 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;
    }
}