CSS: scroll-behavior: smooth；让页面平滑滚动

凡是需要滚动的地方都能加一句scroll-behavior：smooth；来提升用户滚动体验！

比如描点定位功能就有了平滑定位的效果

< a href="#" > TOP </a>

全局css中也建议添加

html, body { scroll-behavior: smooth; }

测试代码和实现效果

<template><div class="demo"><div class="box"><div class="list"><input id="one" readonly />1</div><div class="list bg-blue"><input id="two" readonly />2</div><div class="list bg-olive"><input id="three" readonly />3</div><div class="list bg-orange"><input id="four" readonly />4</div></div><div><label class="click" for="one">1</label><label class="click" for="two">2</label><label class="click" for="three">3</label><label class="click" for="four">4</label></div></div></template><style scoped>.demo {padding-top: 20px;padding-bottom: 20px;text-align: center;}.box {width: 20em;height: 10em;line-height: 10em;scroll-behavior: smooth;overflow: hidden;margin: auto;}.list {height: 100%;background: #ddd;text-align: center;position: relative;font-size: 8em;}.list > input {position: absolute;top: 0;height: 100%;width: 1px;border: 0;padding: 0;margin: 0;clip: rect(0 0 0 0);}.click {display: inline-block;width: 2em;height: 2em;line-height: 2em;border: 1px solid #ccc;background: #f7f7f7;color: #333;font-size: 1em;font-weight: bold;text-align: center;text-decoration: none;cursor: pointer;margin: 0.5em;}.bg-orange {background-color: #fccba2;}.bg-olive {background-color: #b9f2d8;}.bg-blue {background-color: #89c6fc;}</style>

效果如下：

CSS: scroll-behavior: smooth；让页面平滑滚动相关推荐

html自动移动滚动条,css隐藏移动端滚动条并平滑滚动
HTML代码如下移动端隐藏滚动条解决方案 *{ padding:0; margin:0; } .par-type{ height:50px; -webkit-box-sizing:border-bo ...
浏览器原生支持平滑滚动
原文地址:www.zhangxinxu.com/wordpress/?- 浏览器从去年年底开始,已经开始支持浏览器的原生平滑滚动定位,CSS scroll-behavior属性和JS scrollIn ...
HTML锚点定位+平滑滚动
锚点定位属于是一种比较简单且使用频繁的技能,多用在目录和正文之间的跳转. html-代码 <div class="content"><h2 id="ti ...
idea取消鼠标滚轮平滑滚动
刚安装了新的idea社区版,发现鼠标滚轮滚动代码的时候跟以前不一样,变成平滑滚动了,不喜欢这样,这个可以设置. 点击File => Settings => Appearance & ...
[css] 使用overflow: scroll时不能平滑滚动怎样解决？
[css] 使用overflow: scroll时不能平滑滚动怎样解决? scroll-behavior: smooth; 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很 ...
css 平滑滚动:scroll-behavior: smooth；锚点使用
无需 JavaScript 即可实现平滑滚动,只需一行 CSS:scroll-behavior: smooth: <template><div class="wrapper ...
[css] 遇到overflow: scroll不能平滑滚动怎么解决？
[css] 遇到overflow: scroll不能平滑滚动怎么解决? ipone 上解决方法是这样的, -webkit-overflow-scrolling: touch; 个人简介我是歌谣,欢迎 ...
jquery滚动条平滑滚动_使用jQuery平滑垂直或水平页面滚动
jquery滚动条平滑滚动 View demo 查看演示Download Source 下载源 In this tutorial we will create a simple smooth scro ...
CSS scroll-behavior 属性 — 纯 CSS 平滑滚动
CSS 中的 scroll-behavior 属性是一个非常新的属性.定义要求 scroll-behavior(尤其是在选择锚链接时)具有平滑的过渡动画外观,而不是默认的.更刺眼的即时跳转. html ...

CSS: scroll-behavior: smooth；让页面平滑滚动

凡是需要滚动的地方都能加一句scroll-behavior：smooth；来提升用户滚动体验！

测试代码和实现效果

效果如下：

CSS: scroll-behavior: smooth；让页面平滑滚动相关推荐

最新文章

热门文章