首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular scrollPositionRestoration没有动画/平滑滚动?

Angular的scrollPositionRestoration属性用于控制页面导航后滚动位置的恢复方式。默认情况下,当页面导航后,滚动位置会被恢复到之前的位置,但没有动画或平滑滚动效果。

要实现具有动画或平滑滚动效果的滚动位置恢复,可以通过自定义导航器来实现。以下是一个示例:

  1. 创建一个自定义导航器类,例如SmoothScrollRestoration:
代码语言:txt
复制
import { Injectable } from '@angular/core';
import { Router, Scroll, ScrollBehavior } from '@angular/router';

@Injectable()
export class SmoothScrollRestoration implements ScrollBehavior {
  constructor(private router: Router) {}

  public shouldScroll = (position: Scroll): boolean => {
    return true;
  }

  public scrollToPosition = (position: Scroll): [number, number] => {
    const [x, y] = position.position;
    window.scrollTo({ top: y, left: x, behavior: 'smooth' });
    return [x, y];
  }

  public getScrollPosition = (): [number, number] => {
    return [window.scrollX, window.scrollY];
  }
}
  1. 在应用的根模块中提供自定义导航器:
代码语言:txt
复制
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Router, Scroll } from '@angular/router';
import { SmoothScrollRestoration } from './smooth-scroll-restoration';

@NgModule({
  imports: [BrowserModule, RouterModule.forRoot([])],
  providers: [
    {
      provide: Scroll,
      useClass: SmoothScrollRestoration,
      deps: [Router],
    },
  ],
})
export class AppModule {}

现在,当使用Angular的路由导航时,滚动位置将具有平滑滚动效果。

关于Angular的scrollPositionRestoration属性和自定义导航器的更多信息,可以参考腾讯云的Angular文档:Angular文档

请注意,本回答中没有提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等流行的云计算品牌商,以符合要求。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

30个你应该在2022年里使用的JavaScript 动画

8、Animate on Scroll 地址:https://michalsnik.github.io/aos/ 滚动库上的动画以在您滚动时显示动画。...17、Locomotive Scroll 地址:https://locomotivemtl.github.io/locomotive-scroll/ 一个简单的滚动库,提供视口中的元素检测和视差平滑滚动...19、Swiper.js 地址:https://swiperjs.com/ 没有 jQuery 的免费、开源、现代滑块。...适用于 Vanilla JS 和所有现代框架,如 React、Vue、Angular 等。 20、Splide 地址:https://splidejs.com/ 用于轮播和滑块的免费纯 JS 库。...25、Vivus 地址:https://maxwellito.github.io/vivus/ Vivus 是一个轻量级的 JavaScript 类(没有依赖项),它允许你对 SVG 进行动画处理,使它们看起来像是被绘制的

3.3K20
  • 《现代Javascript高级教程》优化动画和渲染的利器

    下面是一些常见的应用场景: 3.1 动画效果 当需要实现平滑动画效果时,requestAnimationFrame是一个理想的选择。...使用requestAnimationFrame,可以实现各种各样的UI动效,如平滑滚动效果、渐变动画、拖拽效果等。通过在每个浏览器刷新帧之前更新UI状态并进行渲染,可以实现流畅和高性能的UI动效。...4.1 实现平滑滚动效果 下面的示例代码演示了如何使用requestAnimationFrame实现平滑滚动效果: function smoothScrollTo(targetY, duration...最后,我们使用 requestAnimationFrame调度step函数的执行,并在滚动动画完成之前不断更新滚动位置。...通过使用requestAnimationFrame,开发者可以实现平滑滚动效果、高性能的游戏渲染、复杂的数据可视化和吸引人的UI动效等。

    19020

    Android 使用 Scroller 实现平滑滚动功能的示例代码

    记录使用Scroller实现平滑滚动,效果图如下: ?...一、自定义View中实现View的平滑滚动 public class ScrollerView extends View { private Scroller mScroller; private Paint...直到computeScrollOffset()返回false,动画执行完成,滚动完成。...二、直接使用Scroller实现View的平滑滚动 我们知道,Scroller会帮我们计算当前时间,插值器返回的值。 而如果直接使用Scroller实现平滑滚动的话,也需要借助带时间的监听器。...到此这篇关于Android 使用 Scroller 实现平滑滚动的文章就介绍到这了,更多相关android Scroller 平滑滚动内容请搜索ZaLou.Cn以前的文章或继续浏览下面的相关文章希望大家以后多多支持

    96421

    前端插件以及部分细分网址梳理

    (ScrollTo)到另一个元素, 支持回退等 jScrollPane: 自定义的滚动条,让所有浏览器都显示一样的滚动条 onepage-scroll: 提供类似于 iPhone6 展示页类似的效果,适用于单页应用...,兼容到 IE8 scrollMonitor: 前端插件用来监控元素的滚动事件(进入、退出等),性能很好 ScrollMagic: 神奇的滚动交互效果插件,可以在滚动的过程中设置各种各样的动态效果 infinite-scroll...: 滚动加载,滚动到最下到自动加载, Paul Irish 大神之作 animatable: 仅仅依靠 border-width 和 background-position 实现的各种动态效果,看真相...Colorpicker) jQuery.countdown: jQuery 倒计时插件 summernote: WYSIWYG 富文本编辑器 awesomplete: 非常轻型的一个自动补全 JS 库, 没有任何依赖...loading: 几种 Loading 效果,基于 SVG flippant.js: 一款能够漂亮的网页元素翻转效果库,代码许久不更新,不过作为源码学习还是不错的 move.js: 基于 CSS3 的前端动画框架

    5.7K90

    js实现单张或多张图片持续无缝滚动

    背景: 想要实现图片持续滚动,既然使用js,就千万不要加css动画、过渡等相关样式,如果想要滚动平滑一下,可以一像素一像素的感动,则很平滑,如果加了过渡动画,当图片重置为0时,会有往回倒的动画效果,跟预期不符...原理: 图片滚动原理同图片轮播原理,同样也适用于文字滚动等一系列滚动,通过复制最后一张图片或最后一堆文字插入第一行,或复制第一张图片或一堆文字插入在结尾,来实现无缝拼接,前提:1、必须是没有设置过渡动画的...,2、重置为0的时候与当前已经滚动到的高度对于图片的位置而言肉眼看上去没变化。...实现: html主要包含三块: 1、最外层盒子,用来展示滚动图的区域,overflow:hidden; 2、滚动的盒子,主要改变该盒子的定位值,来实现滚动,里面包含所有要滚动的图片或文字 3、包含图片或文字的盒子...代码: class Roll { constructor(opts) { this.elem = opts.elem; // 图片包含滚动长度的元素的 this.elemBox

    7.6K10

    原生 JS 实现惯性滚动,给鼠标滚轮增加阻尼感,纵享丝滑

    ,最终达到平滑滚动效果。...(value);}此时页面就可以像往常一样滚动了,并且是不依赖系统默认事件的,由 JS 代理滚动效果,接下来我们继续往方法里处理如何平滑过渡。...线性插值可以用于各种场景,比如在图形学中计算两个点之间的中间点,或者在动画中实现平滑的过渡效果,代码实现:const lerp = (start, end, amt) => (1 - amt) * start...缓动函数除了使用线性插值来实现平滑滚动,还可以使用常见的缓动函数来计算。...视频滚动在该例子中我使用了 scrolly-video 这个库,它能将视频每一帧解析绘制到 Canvas 上,然后基于滚动控制进度,实现效果如下:普通滚动平滑滚动图片图片Gif 图帧率有限,可以前往在线体验效果

    1.5K41

    2019年最全的web前端知识体系汇总

    cli-service.html · vue-router: https://cn.vuejs.org/v2/guide/routing.html · vuex: https://vuex.vuejs.org/ · Angular...: https://angularjs.org/ · Angular(中文): https://www.angularjs.net.cn/ · jQuery: http://www.w3school.com.cn...—滚动时展现动画 · Scrolline.js—页面滚动时显示滚动进度 · Velocity.js—快速流畅的 JavaScript 动画 · Animate on scroll—漂亮的页面滚动元素动画...· Typeahead.js—搜索补全 · Dragdealer.js—炫酷拖拽 · Bounce.js—创建炫酷的 CSS3 动画 · Pagepiling.js—全屏滚动 · Multiscroll.js...—两列垂直反向滚动 · Favico.js—动态 favicon · Midnight.js—固定头部切换效果 · Anime.js—动画库 · Keycode—获取键盘按键的 JavaScriptkeycode

    2.8K00

    转:不要随意的添加script标签

    这适用于可点击的元素,不适用于滚动或拖动操作。 动画 在60Hz的显示器上,我们希望动画滚动时每秒有60帧,这种情况下每帧大约为16ms。...在移动设备上,这是一个很难达到的目标,因为它涉及到页面的互动,而不仅仅是在屏幕上渲染和滚动。...你是否正在做一个对时间要求较为严格的库来处理用户输入和/或动画?如果没有,你需要把时间和精力转移到更有影响力的地方。 编写高性能代码并不是那么重要,因为对于宏观计划通常没有什么影响。...你使用的每一个 JavaScript 框架(React,Vue,Angular,Preact …)都是另一个抽象层次(除非它是一个预编译的)。...你需要确保所有的 JavaScript 都在每帧8ms以内完成,才能保持动画平滑性。 另一方面,CSS 动画和转换会在主线程中运行,如果能够高效执行,则能避免重新布局/重排的情况出现。

    1.1K10

    JavaScript 性能优化技巧分享

    这适用于可点击的元素,不适用于滚动或拖动操作。 动画 在60Hz的显示器上,我们希望动画滚动时每秒有60帧,这种情况下每帧大约为16ms。...在移动设备上,这是一个很难达到的目标,因为它涉及到页面的互动,而不仅仅是在屏幕上渲染和滚动。 ?...你是否正在做一个对时间要求较为严格的库来处理用户输入和/或动画?如果没有,你需要把时间和精力转移到更有影响力的地方。 编写高性能代码并不是那么重要,因为对于宏观计划通常没有什么影响。...你使用的每一个 JavaScript 框架(React,Vue,Angular,Preact ...)都是另一个抽象层次(除非它是一个预编译的)。...你需要确保所有的 JavaScript 都在每帧8ms以内完成,才能保持动画平滑性。 另一方面,CSS 动画和转换会在主线程中运行,如果能够高效执行,则能避免重新布局/重排的情况出现。

    85260

    JavaScript 性能优化技巧分享

    这适用于可点击的元素,不适用于滚动或拖动操作。 动画 在60Hz的显示器上,我们希望动画滚动时每秒有60帧,这种情况下每帧大约为16ms。...在移动设备上,这是一个很难达到的目标,因为它涉及到页面的互动,而不仅仅是在屏幕上渲染和滚动。...你是否正在做一个对时间要求较为严格的库来处理用户输入和/或动画?如果没有,你需要把时间和精力转移到更有影响力的地方。 编写高性能代码并不是那么重要,因为对于宏观计划通常没有什么影响。...你使用的每一个 JavaScript 框架(React,Vue,Angular,Preact …)都是另一个抽象层次(除非它是一个预编译的)。...你需要确保所有的 JavaScript 都在每帧8ms以内完成,才能保持动画平滑性。 另一方面,CSS 动画和转换会在主线程中运行,如果能够高效执行,则能避免重新布局/重排的情况出现。

    1K150

    前端 实战项目·优雅实现 BackTop

    事件绑定和解绑 滚动到页面顶部的按钮一般位于页面角落,并且只有在需要的时候才显示出来。所以首先需要监听页面滚动事件,直到滚动到一定距离后显示 BackTop 按钮。...window.requestAnimationFrame() 方法请求浏览器在下一次重绘之前调用指定的函数来更新动画。...requestAnimationFrame 目的是为了让各种网页动画效果(DOM 动画、Canvas 动画、SVG 动画、WebGL 动画)能够有一个统一的刷新机制,从而节省系统资源,提高系统性能,改善视觉效果...使用 requestAnimationFrame 来实现滚动到页面顶部的动画,核心是按帧来滚动小段距离来实现平滑滚动的效果,代码如下: // scrollTop animation export function...,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值 auto,效果等同于 instant window.scrollTo({ top: 0, behavior: 'smooth

    58140

    介绍几个移动web app开发框架

    jQuery-Mobile-Bootstrap-Theme Frozen UI Frozen UI是腾讯ISUX团队(社交用户体验设计团队)根据最新的手机QQ设计规范制作的移动端Web框架,包括CSS基础样式和组件、JavaScript基础组件和一些动画效果库...为了方便记忆和增添趣味性,腾讯ISUX团队为它取了动画片《冰雪奇缘》的英文名,并把Elsa女王作为该项目的卡通代言人。...Amaze UI 非常注重性能,基于轻量的 Zepto.js 开发,并使用 CSS3 来做动画交互,平滑、高效,更适合移动设备,让你的 Web 应用可以高速载入。...bootstrap中没有的。...AngularJS modules, 比如 angular-route, angular-touch 和 angular-animate 响应式媒体查询是将bootstrap作为单独的文件,你只需要包含你所需要的东西

    6K20

    进阶|掌握着几点,JavaScript 性能优化能有质的飞跃

    尽管目前没有高性能代码的绝对定义,但却存在一个以用户为中心的性能模型。...这适用于可点击的元素,不适用于滚动或拖动操作。 •动画 在60Hz的显示器上,我们希望动画滚动时每秒有60帧,这种情况下每帧大约为16ms。...你是否正在做一个对时间要求较为严格的库来处理用户输入和/或动画?如果没有,你需要把时间和精力转移到更有影响力的地方。 编写高性能代码并不是那么重要,因为对于宏观计划通常没有什么影响。...你使用的每一个 JavaScript 框架(React,Vue,Angular,Preact ...)都是另一个抽象层次(除非它是一个预编译的)。...你需要确保所有的 JavaScript 都在每帧8ms以内完成,才能保持动画平滑性。 另一方面,CSS 动画和转换会在主线程中运行,如果能够高效执行,则能避免重新布局/重排的情况出现。

    36220

    Android开发之Scroller

    翻译为弹性滑动对象,可以实现View的弹性滑动动画,与Scroller相关的就是大家比较熟悉的scrollTo和scrollBy方法,可以用来实现View的滑动,但是它们的缺点就是瞬间完成,无法很平滑地过渡...,而Scroller可以帮助我们很平滑地进行弹性滑动。...使用 一般使用在自定义View中较多,可以实现View的弹性滑动效果 1、自定义一个View,注释很详细 /** * 自定义View 里面有个Scroller 它能实现非常平滑滚动效果 就像动画一样...,dx,dy为滚动的偏移量, 1500ms为完成滚动的时间 mScroller.startScroll(mScroller.getFinalX(), mScroller.getFinalY...Scroller本身并不能实现View的滑动,本质还是让View重绘,重绘中调用View的computeScroll方法,在该方法中进行滑动方法的具体实现,然后再调用重绘函数,如此反复才会在界面上形成不断滑动的动画

    79650

    JavaScript 性能优化技巧分享

    这适用于可点击的元素,不适用于滚动或拖动操作。 动画 在60Hz的显示器上,我们希望动画滚动时每秒有60帧,这种情况下每帧大约为16ms。...在移动设备上,这是一个很难达到的目标,因为它涉及到页面的互动,而不仅仅是在屏幕上渲染和滚动。 ?...你是否正在做一个对时间要求较为严格的库来处理用户输入和/或动画?如果没有,你需要把时间和精力转移到更有影响力的地方。 编写高性能代码并不是那么重要,因为对于宏观计划通常没有什么影响。...你使用的每一个 JavaScript 框架(React,Vue,Angular,Preact ...)都是另一个抽象层次(除非它是一个预编译的)。...你需要确保所有的 JavaScript 都在每帧8ms以内完成,才能保持动画平滑性。 另一方面,CSS 动画和转换会在主线程中运行,如果能够高效执行,则能避免重新布局/重排的情况出现。

    98740
    领券