javascript - ionic 2 - 获取 window.scrollTop

标签 javascript angular typescript ionic2 ionic3

如果没有 jquery,我如何在 Ionic 中执行此操作?

  var window_top = jQuery(window).scrollTop() + 56;
  var div_top = jQuery('#sticky-anchor').offset().top;

最佳答案

您可以使用对 Content 的引用:

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

@Component({...})
export class MyPage{
  @ViewChild(Content) content: Content;

  scrollToTop() {
    this.content.scrollToTop();
  }

  scrollTo(elementId:string) {
    let yOffset = document.getElementById(elementId).offsetTop;
    this.content.scrollTo(0, yOffset, 4000)
  }
}

您可以使用很多属性;最重要的一个是......

getContentDimensions():返回内容和滚动元素的尺寸。

Property                    Type    Details
dimensions.contentHeight    number  content offsetHeight
dimensions.contentTop       number  content offsetTop
dimensions.contentBottom    number  content offsetTop+offsetHeight
dimensions.contentWidth     number  content offsetWidth
dimensions.contentLeft      number  content offsetLeft
dimensions.contentRight     number  content offsetLeft + offsetWidth
dimensions.scrollHeight     number  scroll scrollHeight
dimensions.scrollTop        number  scroll scrollTop
dimensions.scrollBottom     number  scroll scrollTop + scrollHeight
dimensions.scrollWidth      number  scroll scrollWidth
dimensions.scrollLeft       number  scroll scrollLeft
dimensions.scrollRight      number  scroll scrollLeft + scrollWidth

关于javascript - ionic 2 - 获取 window.scrollTop,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41317643/

相关文章:

javascript - 如何从工具提示格式化程序显示 highchart 系列线标记符号?

javascript - CSS 位置固定导致内容重叠

javascript - JavascriptExecutor的executeScript()方法的返回类型是什么?

javascript - 从 observable 内部返回

javascript - 语义 UI 模态仅在 Meteor 中出现一次

angular - 为什么 Angular-CLI 'ng build' 显示 "Killed"?

angular - mdc组件的基础和适配器类的实际使用

angular - 如何使用 RXJS 和 Angular 13 处理 .toPromise() 弃用

angular - 将日期对象绑定(bind)到日期输入的默认值。但不工作

javascript - 绑定(bind)后 CSS 类样式未更新