代码之家 › 专栏 › 技术社区 › Eliya Cohen

Ionic 4平滑滚动至锚定

ionic-framework typescript angular css

Eliya Cohen · 技术社区 · 7 年前

我有一个带有菜单和一些部分的登录页。菜单中的每一项都应该平滑地滚动到给定的部分。

我的第一个方法是:

window.scrollTo({
  y: this.el.nativeElement.querySelector('app-contact').offsetTop // 600
  behavior: 'smooth'
});

我面临的问题是:

离子4似乎对 scrollTo window.scrollTo(0, 300) ,什么也不会发生。
behavior: 'smooth' 不是每个浏览器都支持。因此,我不能使用这种方法。

我想知道我应该如何实现一个平滑滚动到锚使用离子4。

0 回复 | 直到 7 年前

Dwagh 7 年前

离子处理滚动在它的离子内容组件。

content组件附带了一些scroll方法,比如scrollToPoint,可能对您有用。

import {ViewChild} from '@angular/core'
export class yourPage {
  @ViewChild('ion-content') content: IonContent;
  scroll(x, y) {
    this.content.scrollToPoint(x, y, 300)
  }
}

或者,如果要滚动一定距离,也可以选择滚动点

推荐文章

Moblize IT · 未设置ion-select默认值

1 年前

Gappy · 为什么Angular要求一个独立的组件,即使它是

1 年前

ProgrammingStudent · 使用javascript更新ionic web应用程序中.pane和.view的背景色

2 年前

user_1357 · Firebase是否将现有用户链接到匿名帐户?

2 年前

m_m · Axios onUploadProgress事件在Capacitor Android上未触发的问题

2 年前

Yeo Bryan · Ionic项目申请通知权限

2 年前

Joe Johnson · Ionic 7模态在第二次点击时不起作用

3 年前

Piyush aggarwal · 通过Cordova文件打开程序2避免REQUEST_INSTALL_PERMISSION

3 年前

Roberto Vieira · 我的离子搜索栏过滤器不工作

3 年前

marlonga · 错误:在Ionic Angular应用程序中使用argon2浏览器时找不到模块

3 年前