纯css实现页面平滑滚动

最新推荐文章于 2024-06-11 20:41:33 发布
最新推荐文章于 2024-06-11 20:41:33 发布
阅读量3.6k 收藏 2
点赞数 2
分类专栏： 学习 文章标签： css 滑动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AdeZhang1/article/details/84101828
版权

最近做详情页手机弹层 发现一个问题，ios测试机弹层滚动的时候干巴巴的。然后就发现了一个神级属性scroll-behavior:smooth; 把这条属性加在容器上，干巴巴的滚动瞬间润滑了。然后又试着做了一个返回顶部发现也可以。html,body{scroll-behavior:smooth;}然后a标签加上描点刷新看看 干吧啦瞎的返回顶部瞬间加上了过度

AdeZhang1
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯css实现横向滚动
this_ITBoy的博客
07-31 9514
前不久碰到一个需求，在宽度不固定下实现横线滚动，这里我用css来写，记录下来，供以后借鉴。 子元素的宽度大于父元素是，会出现滚动 overflow-x: scroll; 为水平滚动，overflow-y: scroll; 为垂直滚动，按需求这里采用水平横向滚动 html代码： <div class="content"> <div class="conten...
css 实现滚动背景
HELLOWORLD!
07-19 783
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css 实现滚动背景</title> </head> <style type="text/css"> .sectionBox{ width: 100%; height: 100vh; position: relative; overflow: hidden;} .bg
css3关于body的默认滑动机制
newmiracle学习天地
08-30 431
css关于body的默认滑动机制 大家都知道 body里面只要高度超出了原来的高度就可以滚动 但是有时候做弹出 发现并没有隐蔽这个滚动 所有这个滚动优先级很高 隐蔽不了 只能用 fixed查看原文：http://newmiracle.cn/?p=1992
css实现自动滚动效果
weixin_43410094的博客
06-02 3944
css实现自动无限滚动+悬浮停止滚动效果
丝滑滚动网页[HTML+CSS+Javascript附源码]
最新发布
2302_77201863的博客
06-11 353
使用HTML+CSS+JavaScript实现丝滑滚动网页
css 数据滚动实现方法
m0_56789428的博客
06-15 559
方法三：jquery.liMarquee.js插件使用。方法二：setinterval。方法一：css样式使用。
CSS 实现滚动贴合优化滚动效果及实现视差滚动效果
RainHg的博客
11-23 779
滚动优化效果，使用 swiper 后无法触发鼠标的点击、拖动事件；用 background-attachment 实现视差滚动效果
CSS实现列表滚动效果
杜永康的博客
12-06 3910
应用场景：一个竖向列表（或横向列表）中有很多行，但是随着页面上下（或左右）滑动，整个列表会随之移动。以以下代码为例： 效果：
纯JS和CSS3实现页面滚动动画库特效源码.zip
11-09
本资源包含一个使用纯JavaScript和CSS3技术实现的页面滚动动画库特效源码。这个库主要针对前端开发者，特别是那些希望在网页设计中添加动态视觉效果的开发者。它利用了现代浏览器对CSS3特性的支持，如变换...
纯CSS3实现汽车行驶动画特效代码
03-20
【纯CSS3实现汽车行驶动画特效代码】是一个利用CSS3的强大功能来创建动态效果的实例。在现代网页设计中，CSS3已经成为了不可或缺的一部分，它提供了丰富的样式控制和动画效果，使得无需JavaScript或其他编程语言就能...
纯css轮播滚动.rar_css 文字循环滚动
09-20
【纯CSS轮播滚动】是一种常见的网页动态效果，主要用于展示多条信息，如文本或图片，以循环的方式在有限的空间内交替显示。这种效果能够节省页面空间，增加用户体验，尤其适用于新闻更新、广告展示或者产品介绍等...
css3背景图片页面滚动视差效果
11-24
在视差滚动中，我们可以通过JavaScript或者CSS的`calc()`函数动态改变这个属性值，实现背景图在滚动过程中的平滑移动。例如，可以设定一个初始位置，然后在滚动事件触发时，根据滚动距离调整位置。 为了实现视差...
纯CSS实现带上下滚动和缩略预览图的相册效果(无js).zip
11-09
4. **滚动效果**：纯CSS实现滚动效果可能需要用到`scroll-snap`相关的属性。例如，`scroll-snap-type`定义了滚动容器的snap行为，`scroll-snap-align`定义了 snap目标如何对齐。结合CSS的`overflow`和`scroll-...
css：scroll-behavior:smooth让页面平滑滚动
彭世瑜的博客
11-08 2625
html, body { scroll-behavior:smooth; } 参考 CSS让页面平滑滚动
css实现平滑滚动页面顶部
小小•愿望的博客
05-26 3049
在项目中经常会遇到跳转到页面中的某个模块或者是做滚动到顶部、顶部等一系列操作，通常的做法是使用锚点或者是通过定时器慢慢移动距离等方法。锚点直接滚动没有动画效果，定时器需要写很多代码。效果并不是很好且繁琐。 经过多方面研究，发现css可以直接实现平滑滚动，下面就详细的分析一下。 scroll-behavior属性（auto|smooth）：滚动框指定滚动行为及锚点。 auto：滚动框立即滚动。在线运行 scroll-behavior: auto; 效果图： smooth：滚..
如何使用css完成视差滚动效果?
Harley567
10-12 1796
如何使用css完成视差滚动效果?
css实现文字滚动
yy祝的博客
12-26 5267
不使用marquee标签，使用css实现简单的文字横向滚动效果
CSS - 实现横向滚动（横向滚动布局）
热门推荐
王佳斌
08-24 3万+
CSS - 实现横向滚动（横向滚动布局），css横向滚动布局，css实现元素横向滚动的方法css中如何实现横向滚动布局，纯CSS实现横向滚动条，横向不间断滚动DIV CSS代码，纯CSS3横向滚动条实现。
实现点击锚点平滑滚动至指定位置
weixin_49098968的博客
02-06 4176
点击锚点跳转到页面指定位置添加平滑滚动效果，可以平滑滚动至页面指定位置。通过js或者css实现此效果。
纯css实现文字左右循环滚动效果
05-24
可以使用 CSS 动画和 @keyframes 规则来实现文字左右循环滚动的效果。以下是一个示例： HTML 代码： ```html <div class="scroll-wrap"> <div class="scroll-text">这是一段需要滚动的文字，这是一段需要滚动的文字，这是一段需要滚动的文字。</div> </div> ``` CSS 代码： ```css .scroll-wrap { overflow: hidden; } .scroll-text { display: inline-block; white-space: nowrap; animation: scroll 10s linear infinite; } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } ``` 解释一下上面的代码： - `.scroll-wrap` 元素设置了 `overflow: hidden`，以隐藏超出其范围的内容。 - `.scroll-text` 元素设置了 `display: inline-block`，以使其能够在一行中水平排列，并设置了 `white-space: nowrap`，以防止文字换行。 - `@keyframes scroll` 规则定义了一个名为 `scroll` 的动画，它将 `.scroll-text` 元素从左到右平移，然后循环播放。 - `.scroll-text` 元素应用了 `animation` 属性，将 `scroll` 动画应用于它。 您可以根据需要调整动画的持续时间和速度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值