Ionic 3点击按钮滚动到页面底部功能失效问题求助

在Ionic 3里直接用window.scrollTo()确实不会生效，因为Ionic的页面滚动是由ion-content组件单独管理的——它内部有自己的滚动容器，和浏览器window的滚动上下文不是一回事。我之前做项目时也踩过这个坑，给你分享下正确的实现方式：

步骤1：给ion-content添加模板引用 #

首先在你的HTML里，给包裹页面内容的ion-content加上一个模板引用变量，比如#content：

<ion-content #content>
  <div (click)='scrollDown()'>Change User Name</div>
  <!-- 这里需要足够长的内容才能看到滚动效果，我加了个高div示例 -->
  <div style="height: 1000px;">Now you can change your user name</div>
</ion-content>

步骤2：在组件中获取ion-content实例并调用滚动方法 #

在你的TS逻辑代码里，需要通过@ViewChild获取到刚才定义的ion-content实例，然后调用Ionic提供的滚动方法：

import { Component, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';

@Component({
  selector: 'page-your-page', // 替换成你自己的页面选择器
  templateUrl: 'your-page.html' // 替换成你自己的页面模板路径
})
export class YourPage {
  // 通过模板引用获取Content实例
  @ViewChild('content') content: Content;

  scrollDown() {
    // 方式1：直接滚动到页面底部，300是动画时长（可选，单位毫秒）
    this.content.scrollToBottom(300);

    // 如果你还是想滚动到指定的500px位置，用这个方法：
    // this.content.scrollTo(0, 500, 300);
  }
}

为什么原来的方法不行？ #

Ionic的ion-content会把页面内容封装在自己的滚动容器内（一般是一个带有scroll-content类的div），浏览器的window.scrollTo()只能控制整个窗口的滚动，无法影响这个内部容器的滚动。而Ionic提供的Content类方法是直接操作这个内部滚动容器的，所以才能正常生效。

内容的提问来源于stack exchange，提问作者core114