纯 CSS 检测滚动的速度和方向

最新推荐文章于 2024-08-22 14:15:11 发布
最新推荐文章于 2024-08-22 14:15:11 发布
收藏
点赞数
文章标签： css tensorflow 前端 人工智能 python
原文链接：https://mp.weixin.qq.com/s?__biz=MzI0MzIyMDM5Ng==&mid=2649862624&idx=2&sn=07bfac8406c278212cb7238375ccd806&chksm=f0426392c0ab219ccb52cf4ceeb2685c81a472c857cb8833b69965f94e1945a4539c29fdc1fa&scene=126&sessionid=0
版权

分享一个 CSS 交互技巧

CSS可以做的事情越来越越多了。

我们经常会碰到这样的场景，很多网页会在右下角放一个固定入口，有可能是返回顶部，有可能广告，为了避免干扰，在页面滚动时，会把这些入口临时收起来，停止滚动后再出现，就像这样

784cc2d40645b40bca1fdce349d63258.gif

通常我们实现这样的效果会借助JS的定时器，并且监听页面滚动，其实也不复杂，大概是这样实现

let timer;
window.addEventListener('scroll', function(){
  // 是否在滚动
  isScroll = true
  timer && clearTimeout(timer)
  timer = setTimeout(() => {
    isScroll = false
  }, 150)
})

现如今，CSS也能实现这样的功能了，也就是可以检测页面是否在滚动，进一步，还能检测滚动的速度和方向，一起来看看吧~

一、CSS 检测原理

说起原理，其实和JS是差不多的，都是有个类似于定时、延时的机制。那具体如何做呢？下面一步一步来介绍。

既然是滚动，所以离不开CSS滚动驱动动画，这个之前有详细介绍，就不多描述了

CSS 滚动驱动动画终于正式支持了~ 

比如，我们有这样一个可以滚动的页面

<body>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
	...
</body>

简单修饰一下，效果是这样的

0724a5c542cc8a84627c06b6fe6ddfb3.png

然后我们需要用 CSS检测滚动的进度，该如何做呢？没错，就是用 CSS变量。

假设有一个这样的动画，--scroll-position从0变到100，如下

@keyframes adjust-pos {
  form {
     --scroll-position: 0;
  }
  to {
    --scroll-position: 100;
  }
}

为了方便演示，我们可以把这个动画的变化过程显示在页面上

<div class="debug" hidden>
  <div data-id="--scroll-position"></div>
</div>

这里利用CSS计数器，直接用伪元素显示CSS变量值

关于这个技巧，之前也在多篇文章中有应用到，非常实用

你可能不需要 JS！CSS实现一个计时器

如何让CSS计数器支持小数的动态变化？

还在使用定时器吗？CSS 也能实现电子时钟

动画合成小技巧！CSS 实现动感的倒计时效果

自定义计数器小技巧！CSS 实现长按点赞累积动画

具体实现如下

:root {
  animation: adjust-pos linear 3s;
}
.debug{
  counter-reset: scroll-position calc(var(--scroll-position) * 1);
}
[data-id="--scroll-position"]::after {
  content: "--scroll-position: " counter(scroll-position);
}

现在效果如下

0d7573ef48cdd039ee5ac5602d5ce0df.gif

现在数字直接从0变到了100，没有中间的过程。

这是因为--scroll-position是一个自定义变量，无法直接过渡。为了使这个变量也能像普通的过渡属性自动过渡，需要用到CSS @property，也就是需要注册这个变量，让浏览器认为这是一个合法的 CSS 变量

@property --scroll-position {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

这段代码表示--scroll-position是一个number类型的数据，是一个合法的，可以过渡的类型，自然也就有动画了，效果如下

40fe0802b1a9aedbc8da9e42cb4a1cf0.gif

然后我们加上滚动驱动动画，让这个动画跟随页面滚动

:root {
  animation: adjust-pos 3s linear both;
  animation-timeline: scroll();
}

效果如下，这样就能检测到滚动的具体位置了

681bfb292d4fcf3763e7d24b00bc481d.gif

当然，仅仅这样还是不够的，我们只知道了滚动的进度，并不知道滚动的状态。

为了知道滚动的速度，我们还需要另一个变量，假设是--scroll-position-delayed

@property --scroll-position-delayed {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@keyframes adjust-pos {
  form {
     --scroll-position: 0;
    --scroll-position-delayed: 0;
  }
  to {
    --scroll-position: 100;
    --scroll-position-delayed: 100;
  }
}

这样就有了两个变量在同时变化，效果如下

6e42e8dc9986657200d3de98c313b0c7.gif

同时变化没有什么意义，我们需要加一点延时，就像 JS的定时器一样，这里我们可以直接通过transition来实现

body{
  margin: 0;
  transition: --scroll-position-delayed 0.15s linear;
}

这里的0.15s表示--scroll-position-delayed在变化时需要0.15s的时间，而--scroll-position是瞬时完成的，所以就相当于--scroll-position-delayed始终比--scroll-position慢了0.15秒，也就相当于延时了0.15s，实际效果如下

e67d53c2560eab836c4c435f27a63046.gif

是不是可以很清楚的看到下面的数值要比上面的慢一点？

有了这个时间差，我们就可以判断当前的滚动状态了。

比如我们可以用一个变量--scroll-velocity来表示两者的差值

body{
  --scroll-velocity: calc(var(--scroll-position) - var(--scroll-position-delayed));
}

效果如下

12e372c78e1c667044dfeac1a863c7b4.gif

通过这个差值，我们是不是就能发现一些规律？

  1. 当--scroll-velocity为0时，表示滚动停止，否则表示正在滚动中

  2. 当--scroll-velocity大于0时，表示滚动方向为下

  3. 当--scroll-velocity小于0时，表示滚动方向为上

  4. 还可以从--scroll-velocity的绝对值上考虑，绝对值越大，表示滚动速度越快，反之则越慢

这就是CSS检测的原理了，是不是还算简单呢？不过这还没完，还需要具体实现，比如怎么根据这个变量来匹配对应的样式

二、CSS 样式查询

回到文章开头，我们如何检测是否正在滚动呢，并且在滚动的时候隐藏右下角悬浮按钮呢？下面就来实现这样一个功能。

既然当--scroll-velocity为0时，就表示滚动停止，那我们是不是可以直接用样式查询来匹配呢？

@container - CSS: Cascading Style Sheets | MDN (mozilla.org)[1]

CSS 样式查询是容器查询的一部分，从名称也可以看出，它可以查询元素的样式，进而设置额外的样式。比如默认是隐藏的

.back{
  transform: translateX(100%);
  transition: .2s;
}

当匹配到--scroll-velocity:0时，显示这个悬浮按钮，就可以这样来实现

@container style(--scroll-velocity: 0) {
  .back{
    transform: translateX(0);
  }
}

效果如下

b7db71f60cf26f48c6e249aa6ee36310.gif

好像并没有起效果？其实和前面的动画原理差不多，这是一个CSS自定义变量，无法直接检测到变化的值。这里有一个解决方案，为了保证能够样式查询到，需要用@property注册一下

@property --scroll-velocity {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

这样就能完美检测了

1d60c31768768324670b539e930411c6.gif

你也可以访问线上链接来查看实际效果

  • CSS scroll-speed (juejin.cn)[2]

是不是非常简单？

三、CSS 变量计算

除了使用样式查询外，我们还可以用CSS变量的计算方式来实现。

什么意思呢？比如我们想知道是否在滚动，其实就是两个状态，那能不能用0和1来表示是否在滚动呢？那就需要做一点点变换了。

现在--scroll-velocity表示差值，范围可能是-50~50，那如何转换成1~0呢，很简单，直接除以自身就行了, 比如-50/-50和50/50结果都是1，有人会奇怪0/0会不会无限大，没关系，这里CSS计算的结果还是0，实现如下

body{
  --scroll-velocity: calc(var(--scroll-position) - var(--scroll-position-delayed));
  --scroll-dynamic: calc(var(--scroll-velocity) / var(--scroll-velocity));
}

这样的话，我们就无需样式查询来改变右下角悬浮按钮的状态了，直接用--scroll-dynamic来控制transform

.back{
  transform: translateX(calc(var(--scroll-dynamic) * 100%));
}

看看效果

d85a02b97601450f8dd170b1676e37c9.gif

不一样的实现也能得到相同的效果，你也可以访问线上链接来查看实际效果

  • CSS scroll-dynamic - (juejin.cn)[3]

除了可以得到是否在滚动，还能计算得到滚动方向，比如1表示向下，-1表示向上，我们可以这样来计算

body{
  --scroll-velocity: calc(var(--scroll-position) - var(--scroll-position-delayed));
  --scroll-speed: max(var(--scroll-velocity), -1 * var(--scroll-velocity));
	--scroll-direction: calc(var(--scroll-velocity) / var(--scroll-speed));
}

看似有点复杂，其实也不难理解。比如当前差值是-30，那么，我们可以通过乘以-1，然后取两者较大值，这样就能得到绝对值了。

f2cd46ff4178ac51aff654272d968d14.png

上面其实是个“偏方”，关于绝对值，其实已经有CSS abs()了，只是现在还没有支持，相信以后就能用上了

然后用原值除以这个绝对值，就能得到1或者-1了。

利用这个特性，我们可以在不同的方向改变箭头的指向

.back{
  transform: scaleY(var(--scroll-direction));
}

效果如下

03f9dc9dd275d1c728549062c9c48d25.gif

你也可以访问线上链接来查看实际效果

  • CSS scroll-dynamic (juejin.cn)[4]

四、更多有趣的案例

除了上面几个应用，我还找了几个有趣的案例。

比如下面这种虫洞效果，在水平或者垂直方向滚动时，会有明显的透视效果

https://codepen.io/bramus/pen/wvRqVBm

c8876a0cd5cd5150cea5eb9a60e5db7a.gif

再比如这种上下滚动，可以看到不同方向上内容的倾斜角度不一样，而且滚动越快，倾斜越大

https://codepen.io/bramus/pen/OJrxBaL

3324c890adf4f08300610852e646c2ba.gif

还有一个比较简单实用的运动模糊滚动，也就是在滚动时，页面会有模糊的效果

https://codepen.io/bramus/pen/XWoREjv

c2b57942f360132b35330d82b6530f2d.gif

五、最后总结一下

说了这么多，核心原理其实就这么几行，如下

@property --scroll-position {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --scroll-position-delayed {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@keyframes adjust-pos {
  to {
    --scroll-position: 100;
    --scroll-position-delayed: 100;
  }
}
:root {
  animation: adjust-pos 3s linear both;
  animation-timeline: scroll();
}
body{
  transition: --scroll-position-delayed 0.15s linear;
  --scroll-velocity: calc(var(--scroll-position) - var(--scroll-position-delayed));
  --scroll-speed: max(var(--scroll-velocity), -1 * var(--scroll-velocity));
  --scroll-direction: calc(var(--scroll-velocity) / var(--scroll-speed));
  --scroll-dynamic: calc(var(--scroll-velocity) / var(--scroll-velocity));
}

其实原理还是比较好理解的，下面总结一下

  1. 首先用CSS自定义变量--scroll-position实现一个从0到100的动画，注意需要用@property注册

  2. 然后用CSS滚动驱动动画将其关联，实现在滚动的时候变量自动变化

  3. 接着再定义一个相同动画的变量--scroll-position-delayed，并设置过渡时间，这样就会比--scroll-position变化的慢一点

  4. 将这两个变量相减可以得到差值--scroll-velocity

  5. 通过这个差值--scroll-velocity就能获得各种状态了

  6. 当--scroll-velocity为0时，表示滚动停止，否则表示正在滚动中

  7. 当--scroll-velocity大于0时，表示滚动方向为下

  8. 当--scroll-velocity小于0时，表示滚动方向为上

  9. 还可以从--scroll-velocity的绝对值上考虑，绝对值越大，表示滚动速度越快，反之则越慢

  10. 可以通过样式查询来匹配各种条件，不过需要用@property注册

  11. 通过 CSS calc 和 max计算可以得到更多状态，比如滚动方向

  12. 然后就是实际的运用了

至于兼容性，目前仅支持 chrome 115+，只是依赖CSS滚动驱动动画，这个神级属性还是要再等等，5年后应该就可以愉快使用了。最后，如果觉得还不错，对你有帮助的话，欢迎点赞、收藏、转发 ❤❤❤

[1]@container - CSS: Cascading Style Sheets | MDN (mozilla.org)： https://developer.mozilla.org/en-US/docs/Web/CSS/@container

[2]CSS scroll-speed (juejin.cn)： https://code.juejin.cn/pen/7372834920302903346

[3]CSS scroll-dynamic - (juejin.cn)： https://code.juejin.cn/pen/7372839994840973346

[4]CSS scroll-dynamic (juejin.cn)： https://code.juejin.cn/pen/7372856142126874634

winty~~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
fullPage.js和CSS3实现全屏滚动效果
10-19
3. 检测滚动方向：插件提供了监听滚动事件的方法，可以据此触发不同的动画效果。 4. 响应式设计：fullPage.js支持响应式布局，确保在不同设备和屏幕尺寸上都能良好运行。 在HTML结构方面，代码中定义了一个`...
精美html+css上下滚动,轮播(兼容ie8)
01-06
5. **兼容性处理**：考虑到要兼容IE7及以上版本，开发者可能需要使用jQuery的`.browser`方法（虽然现在已被废弃，但在老版本中仍然可用）来检测浏览器类型和版本，然后针对不同的浏览器应用相应的兼容性代码。...
纯css3实现金鱼游动.zip
11-25
JavaScript也可能被用来增强交互性，例如检测用户的滚动位置，当金鱼靠近屏幕边缘时改变游动方向，或者根据用户的鼠标移动来调整金鱼的游动速度或方向，提供更丰富的用户体验。 总结来说，"纯css3实现金鱼游动.zip...
jquery检测滚动距离插件Scroll Detection
07-09
2. **方向检测**：插件可以区分向上滚动和向下滚动，这样你可以根据滚动方向执行不同的操作。 3. **防抖动优化**：为了提高性能，插件可能包含了防抖（debounce）或节流（throttle）机制，防止在用户快速滚动时频繁...
div css 滚动条样式 DIV滚动条属性及样式设置方式
12-13
本文将详细介绍如何通过CSS来设置`div`标签内的滚动条属性和样式。 首先，要让`div`元素显示滚动条，我们需要设置`overflow`属性。这个属性决定了当内容溢出元素边界时的处理方式。有以下几个可选值： 1. `visible...
CSS的:host伪类：精粹自定义Web组件选择艺术
2401_85702623的博客
08-18 565
Web组件是一种自定义HTML元素，允许开发者封装HTML、CSS和JavaScript，创建可重用的组件。影子DOM为这些组件提供了样式和DOM结构的封装。:host伪类允许CSS选择器穿透影子DOM，选择自定义元素的宿主元素。
响应式Web设计：纯HTML和CSS的实现技巧
vvvae1234的博客
08-18 709
互联网已经成为人们日常生活中不可或缺的一部分，随着移动设备的普及，用户访问网站的方式也发生了巨大变化。因此，响应式Web设计（Responsive Web Design, RWD）应运而生。它的目标是使Web页面能够根据不同设备屏幕的大小和分辨率自动调整布局，以提供最佳的用户体验。本文将深入探讨响应式Web设计的基本概念、实现技巧，并通过实际操作案例来展示如何使用纯HTML和CSS构建一个响应式网页。
CSS的:placeholder-shown伪类：精确控制输入框占位符样式
2402_85758349的博客
08-17 915
伪类代表的是一个输入字段（或元素）在其内显示占位符文本的状态。当输入框为空且占位符可见时，这个伪类就生效。这对于创建更丰富的表单样式和交互效果非常有用。
CSS+JS实现一个鼠标移动的高亮边框效果
流绪@微梦
08-19 534
我们再在 .card::before 加上一个 transform属性，同时在 .card 上加上 overflow: hidden属性，观察浏览器，神奇的效果出现了！想要实现高亮的效果，我们还需要在 .card 和 .inner 之间再插入一层，这一层是我们实现高亮的关键！假如图中的小圆圈为鼠标位置，当鼠标移动到此位置时，只需要计算把每张卡片中间层的中心偏移到鼠标的位置即可。在Windows系统里有一个很棒的细节效果，元素的渐变高亮边框是可以感知鼠标的，边框的高亮部分会跟随鼠标的移动而移动。
探索tailwindcss多主题切换
xuefeng11111的博客
08-18 438
探索tailwind+css变量切换主题
CSS 对齐
wjs2024的博客
08-19 365
CSS对齐是网页设计和布局的关键部分。通过掌握文本对齐、块级元素对齐、Flexbox对齐和Grid对齐，开发者可以创建出既美观又响应式的网页布局。每种方法都有其适用场景，选择合适的对齐方式可以大大提高开发效率和页面性能。
原神4.8版本重点培养和抽到角色数据表：修改了添加倒计时.隐藏了抽到角色数据表删除按钮、备注列和选择列
lulei5153的博客
08-22 122
当用户修改某个字段（等级、命座、天赋）时，不仅更新当前表格的数据，还会找到另一个表格中对应的角色，并更新其数据。最后，重新渲染两个表格以显示最新的数据。这样可以确保两个表格的数据始终保持一致。
响应式 Web 设计：纯 HTML 和 CSS 的实现技巧
windowshht的博客
08-22 607
响应式 Web 设计是现代网页开发的重要组成部分，能够为用户提供一致的体验。通过使用纯 HTML 和 CSS，您可以实现灵活的布局、适应不同设备的图像和样式。本文介绍的技巧和示例将帮助您在项目中有效地应用响应式设计。希望您能在实践中不断探索和优化，创造出更好的用户体验。如需深入了解响应式设计的更多内容，建议参考相关书籍和在线资源，持续学习和实践。
css加载中动画
程序员
08-19 219
css加载中动画
“CSS”第一步——WEB开发系列13
一条晒干的咸鱼的博客
08-19 623
​CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。
不同分辨率下vue页面的高度自适应
weixin_72439307的博客
08-19 216
html高度自适应
响应式web设计,纯HTML和CSS的实现技巧( 9 种)
最新发布
呼叫6945的博客
08-22 432
响应式Web设计（Responsive Web Design，RWD）旨在使网站能够在各种设备和屏幕尺寸上良好地显示和操作。
css 文字图片居中及网格布局
m0_69254007的博客
08-16 347
【代码】css 文字图片居中及网格布局。
CSS实现鼠标hover展开菜单
p_s_p的博客
08-22 125
【代码】CSS实现鼠标hover展开菜单。
css hover鼠标不能滚动
06-09
CSS的:hover伪类只是在鼠标指针悬停在元素上时应用样式，它并不能控制鼠标滚动。如果您想控制鼠标滚动的话，您需要使用JavaScript或jQuery来实现。 例如，您可以使用jQuery来检测鼠标滚动事件，并在元素上添加/删除类来应用/取消样式： ``` $(document).on('mousewheel DOMMouseScroll', function(e) { var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail; if (delta < 0) { $('.your-element').removeClass('scroll-down'); $('.your-element').addClass('scroll-up'); } else { $('.your-element').removeClass('scroll-up'); $('.your-element').addClass('scroll-down'); } }); ``` 这里我们检测了鼠标滚动事件，然后根据滚动方向添加/删除类来应用/取消样式。您可以根据需要修改样式和类名。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值