Angular 2 scrollIntoView 不滚动
创始人
2024-10-15 14:00:58
0

在Angular 2中,可以使用ViewChild装饰器来引用DOM元素并调用其scrollIntoView方法。以下是一个示例解决方法:

首先,在组件的模板中,添加一个按钮和一个需要滚动到的目标元素:


然后,在组件的类中,使用ViewChild装饰器引用目标元素,并在点击按钮时调用scrollIntoView方法:

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  @ViewChild('scrollTarget', {static: false}) scrollTarget: ElementRef;

  scrollToElement() {
    this.scrollTarget.nativeElement.scrollIntoView({ behavior: 'smooth' });
  }
}

在上面的代码中,scrollTarget被装饰为ViewChild,并且在scrollToElement方法中,我们通过nativeElement属性来访问DOM元素,并调用其scrollIntoView方法来滚动到元素。

最后,当点击按钮时,scrollToElement方法将被调用,目标元素将滚动到视图中。

请注意,确保在引用DOM元素之前,ViewChild装饰器的第二个参数设置为false。这是因为在这个示例中,目标元素是通过ngIf等指令动态地添加到DOM中的。

相关内容

热门资讯

揭秘一下!wepoker开辅助... 揭秘一下!wepoker开辅助能查到吗,hhpoker辅助器,第三方教程(有挂软件);原来确实真的有...
玩家必看教程!pokernow... 自定义aapoker怎么设置提高好牌几率系统规律,只需要输入自己想要的开挂功能,一键便可以生成出微扑...
推荐十款!大菠萝手游辅助,we... 推荐十款!大菠萝手游辅助,wepoker破解器,技巧教程(有挂透明);1分钟了解详细教程(微信 13...
专业讨论!拱趴大菠萝怎么开挂,... 专业讨论!拱趴大菠萝怎么开挂,wejoker开挂,靠谱教程(有挂透明),支持语音通讯、好友开房及战队...
技巧知识分享!hhpoker买... 技巧知识分享!hhpoker买挂,hhpoker有没有作弊挂,黑科技教程(有挂辅助);原来确实真的有...
热门推荐!pokemmo内置修... 热门推荐!pokemmo内置修改器,wejoker辅助器要钱玩吗,技巧教程(有挂软件);原来确实真的...
新手必备!aapoker破解侠... 1、新手必备!aapoker破解侠是真的吗,epoker透视底牌,科技教程(有挂攻略);详细教程。2...
揭秘关于!wepoker透视脚... 揭秘关于!wepoker透视脚本免费app,pokerworld软件,AA德州教程(有挂技巧);小薇...
总算了解!wepoker透视脚... 总算了解!wepoker透视脚本是什么,wepoker有机器人吗,力荐教程(有挂软件);致您一封信;...
六分钟了解!pokemmo脚本... 自定义wepoker数据分析工具系统规律,只需要输入自己想要的开挂功能,一键便可以生成出微扑克专用辅...