scroll-behavior属性：滚动框指定滚动行为及锚点

最新推荐文章于 2023-12-14 15:04:33 发布
VIP文章 最新推荐文章于 2023-12-14 15:04:33 发布
阅读量994 收藏 2
点赞数 1
分类专栏： VUE 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/swx999/article/details/112005390
版权

1、scroll-behavior属性：auto（滚动条立即滚动） / smooth（窗口平稳滚动） / inherit / initial / unset

2、锚点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚点平滑跳转</title>
 
    <style>
        *{
   
            margin: 0;
            padding: 0;
        }
        html{
   
             scroll-behavior: smooth;
        }
        nav{
   
            width: 50%;
            height: 50px;
            text-align
最低0.47元/天 解锁文章
swx980
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS scroll-behavior属性： 滚动框指定滚动行为
weixin_30859423的博客
03-22 319
概念 　　当用户手动导航或者 CSSOM scrolling API 触发滚动操作时，CSS属性scroll-behavior为一个滚动框指定滚动行为，其他任何的滚动，例如那些由于用户行为而产生的滚动，不受这个属性的影响。在根元素中指定这个属性时，它反而适用于视窗。 语法 /* Keyword values */ scroll-behavior: auto; /...
CSS scroll-behavior 属性 — 纯 CSS 平滑滚动
lio-zero 的博客
02-10 583
CSS 中的 scroll-behavior 属性是一个非常新的属性。定义要求 scroll-behavior(尤其是在选择锚链接时)具有平滑的过渡动画外观，而不是默认的、更刺眼的即时跳转。 html { scroll-behavior: auto | smooth; } scroll-behavior 属性接受两个值，将切换打开和关闭的平滑滚动功能。 auto(默认)：该值允许滚动框中的...
scroll-behavior属性使用方法
最新发布
Yt0601的博客
12-14 550
scroll-behavior属性 当用户单击可滚动框中的链接时，实现模块间滚动切换，而不是直接跳转
纯CSS锚点过渡效果，CSS3的属性scroll-behavior: smooth；轻松搞定置顶操作
jason_renyu的博客
09-26 2930
CSS属性处理锚点滚动的过渡效果，以及过渡动画的实现操作；并通过过渡效果，轻松实现置顶效果
css实现平滑滚动页面顶部
小小•愿望的博客
05-26 2896
在项目中经常会遇到跳转到页面中的某个模块或者是做滚动到顶部、顶部等一系列操作，通常的做法是使用锚点或者是通过定时器慢慢移动距离等方法。锚点直接滚动没有动画效果，定时器需要写很多代码。效果并不是很好且繁琐。 经过多方面研究，发现css可以直接实现平滑滚动，下面就详细的分析一下。 scroll-behavior属性（auto|smooth）：滚动框指定滚动行为及锚点。 auto：滚动框立即滚动。在线运行 scroll-behavior: auto; 效果图： smooth：滚..
CSS 属性 scroll-behavior 滚动行为
qwguo
02-23 922
scroll-behavior属性 当用户手动导航或者 CSSOM scrolling API 触发滚动操作时，CSS 属性 scroll-behavior 为一个滚动框指定滚动行为，当用户通过鼠标滑轮滚动或者手机触屏滚动，不受这个属性的影响。在根元素中指定这个属性时，它反而适用于视窗。 scroll-behavior属性包括： smooth | auto; auto: 默认值，表示滚动框立即...
CSS scroll-behavior和JS scrollIntoView实现平滑滚动
weixin_41897680的博客
05-02 1314
CSS scroll-behavior和JS scrollIntoView实现平滑滚动
微信小程序-scroll-view滚动到指定位置（类似锚点）
03-29
本文作者：莫兰迪不会没有瓶子，来自原文地址 先来说一下官网例子吧 ...scroll-view竖向滚动必须设置scroll-y="true" style="height: 200rpx;" 必须.. style="height: 200rpx;" 必须为200rpx/200px 不能用百分号 js中
react-scroll-motion::film_frames:易于制作滚动动画
05-24
:film_frames: React滚动运动 :sparkles: 使用ReactJS轻松制作滚动动画安装 # Use npmnpm install react-scroll-motion# Use yarnyarn add react-scroll-motion代码预览个人电脑移动的 import { Animator , ...
scroll-animation:根据滚动位置对元素进行动画处理
04-28
我找不到适合我需要的npm软件包： 动画任何DOM属性的能力使用进行表演暂时挂起以最大程度地减少负载没有data-属性或特殊标签正在安装npm install scroll-animation用法const animate = require ( 'scroll-animation...
angular-scroll-events：滚动事件的Angular指令
02-06
滚动事件的Angular指令实用程序库添加了对scroll-up和scroll-down事件的支持安装使用npm或yarn安装'g1b.angular-scroll-events' npm install angular-scroll-events要么： yarn add angular-scroll-events将'g1b....
tua-body-scroll-lock：:locked_with_key:身体滚动锁定功能适用于所有功能
01-29
tua-body-scroll-lock启用所有内容的身体滚动锁定。 为什么不使用 ？ 在Android Webview上不起作用 在带鼠标滚轮的PC上不起作用 如果您触摸某个地方而不是targetElement ，则无法在iOS上targetElement 必须传递...
css scroll属性_CSS中的scroll-behavior属性
cumt951045的博客
07-18 7069
css scroll属性 CSS | 滚动行为属性 (CSS | scroll-behavior property) Who does not want their links to function smoothly and attractively? This type of functionality is very easy to implement. All you need is a ...
平滑滚动
hzjanger的博客
06-15 669
使界面平滑滚动到给定元素的指定坐标位置,可以使用scrollTo方法 语法 element.scrollTo(x-coord, y-coord) // OR element.scrollTo(options) element指的是DOM节点元素,可以是windows,也可以通过document.getElementByxxx获取的节点 传入两个参数 参数 x-coord y-coord 含义 沿x轴滚动的距离 沿y轴滚动的距离 传入options参数 传入的options参
CSS：滚动 (scroll-behavior & scroll-snap-align)
Bule_daze的博客
07-16 817
scroll-behavior - 设置是立即滚动还是平滑的滚动 值： auto：滚动框立即滚动。 smooth：滚动框通过一个用户代理预定义的时长、使用预定义的时间函数，来实现平稳的滚动。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal
css3中的scroll-behavior属性 让滚动条可以平滑滚动动画
霸霸的博客
08-23 4066
当用户手动导航或者 CSSOM scrolling API 触发滚动操作时，CSS 属性 scroll-behavior 为一个滚动框指定滚动行为，当用户通过鼠标滑轮滚动或者手机触屏滚动，不受这个属性的影响。在根元素中指定这个属性时，它反而适用于视窗。: 表示允许滚动时采用平滑过渡，而不知直接滚动到相应位置，最常见的比如回到顶部按钮和锚点。: 默认值，表示滚动框立即滚动到指定位置。
关于Scroll的CSS属性--修改滚动条样式
qq_30258721的博客
11-16 2425
关于Scroll的CSS属性--修改滚动条样式
get新技能CSS3 scroll-behavior（锚点跳转平缓滚动）
Mgf_Yzy的博客
04-13 2001
CSS3 scroll-behavior（锚点跳转平缓滚动）
babel-plugin-import 实现自动按需引入
热门推荐
swx999的博客
01-26 1万+
Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法 babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。 1、下载 npm i babel-plugin-import -D 2、 （1）在.babelrc 中添加配置 注意：webpack 1 无需设置 libraryDirectory { "plugins": [ ["import", { "libraryN
scroll-behavior: smooth;
03-16
`scroll-behavior:smooth` 是一个CSS属性，用于指定网页在滚动时的滚动行为。当使用 `scroll-behavior:smooth` 时，网页会以平滑的动画效果滚动到指定位置，而不是瞬间跳到那个位置。这种滚动方式可以提高用户体验，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值