首页 > 其他分享 >scrollTo与scrollBy滚动 动画效果

scrollTo与scrollBy滚动 动画效果

时间:2023-03-08 18:56:59浏览次数:33  
标签:动画 滚动 scrollTo top scrollBy window options

1.scrollTo(x,y) //指定滚动到x轴和y轴的位置
2.scrollTo(options) //options有三个参数,(left,top,behavior ),
top 等同于 y-coord
left 等同于 x-coord
behavior 类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值auto,实测效果等同于instant
window.scrollTo({
top: 0,
behavior: "smooth"
});

 

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/scrollBy   地址

 

window.scrollBy(x-coord, y-coord);
window.scrollBy(options)

 

 

向下滚动一页:

window.scrollBy(0, window.innerHeight);

向上滚动一页:

window.scrollBy(0, -window.innerHeight);

使用 options:

window.scrollBy({
  top: 100,
  left: 100,
  behavior: "smooth"
});

标签:动画,滚动,scrollTo,top,scrollBy,window,options
From: https://www.cnblogs.com/wsj1/p/17195747.html

相关文章

  • Jetpack Compose 之Pager滑动动画
    一般使用state.animateScrollToPage()滑动的话会瞬间划过去。如果想要加入滑动动画的话需要使用suspendfunScrollableState.animateScrollBy(value:Float,animationSpe......
  • 巧用 CSS 变量,实现动画函数复用,制作高级感拉满的网格动画
    本文将介绍一种基于CSS变量技巧,通过合理使用CSS变量,实现CSS动画@keyframes的复用。CSS变量CSS变量大家应该都比较熟悉了,已经不能算是新知识了,快速过一遍。CSS......
  • 使用requestAnimationFrame遍历图片实现动画效果
    关于MDN的描述参考https://developer.mozilla.org/zh-CN/docs/Web/API/window/requestAnimationFrame背景:ui提供了名称compress_00001一直到 compress_00039共40张......
  • unity3D设置手枪的动画与子弹的自动销毁07
    取消手枪自动播放动画usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;publicclassGunManager:MonoBehaviour{//1.枪旋转......
  • 直播系统源码,云朵左右移动循环动画实现
    直播系统源码,云朵左右移动循环动画实现组件 <imageclass="yun3aniYunImg":animation="animationYunData":src="yun1"></image>​JS data(){return{   ......
  • css动画效果
    缓动动画小球下落效果@keyframesbounce{60%,80%,100%{transform:translateY(80px);animation-timing-function:cubic-bezier(.215,.61,.355,......
  • 【unity】基于Playable的自定义动画系统
    前言开发时逐渐对蜘蛛网动画系统中重复性的工作感到厌烦,而且当动画一多起来,即使蜘蛛网分了层,我仍然连看都不想看。遂寻求解决方案。蜘蛛网那一套系统不支持在运行时创建......
  • DMotion - 基于DOTS的动画框架和状态机
    【博物纳新】专栏是UWA旨在为开发者推荐新颖、易用、有趣的开源项目,帮助大家在项目研发之余发现世界上的热门项目、前沿技术或者令人惊叹的视觉效果,并探索将其应用到自己项......
  • vue3+antd+jsx 实现表格行数据排序的动画效果
    ------------恢复内容开始------------vue3的写法转载https://blog.csdn.net/qq_51898604/article/details/128973430因为ant-design表格组件没有封装拖拽排序的方法,需......
  • 使用 Three.js 的 3D 制作动画场景
    推荐:将 NSDT场景编辑器 加入你的3D开发工具链。由于GSL语法的复杂性,对于许多开发人员来说WebGL是一个未知的领域。但是有了Three.js,在浏览器中3D的实现变得简单......