纯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;
    }
}

posted @ 2024-07-12 11:09 (๑•_•๑) 阅读(34) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· CORS解决跨域问题

· 如何用纯 css 实现页面滚动停靠效果

· 使用纯CSS实现一个滚动进度条

· Css实现浏览滚动条效果

· css中Scroll-behavior属性有什么应用场景？

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义

2025年3月

日

一

二

三

四

五

六

(๑•_•๑)

纯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;
	}
	}