angular中可通过ion-content指令来控制滚动条，ionContent指令提供一个易用的内容区域，该区域可以用Ionic的自定义滚动视图进行配置，或浏览器内置的溢出滚动。

内容组件提供了一个易于使用的内容区域，并提供了一些有用的方法来控制可滚动区域。在一个视图组件中只应该有一个内容。如果需要其他可滚动元素，请使用ionScroll。

内容区域还可以通过刷新组件来实现刷新 。

ion-content的用法：

Add your content here!

要从页面的逻辑中引用内容组件，可以使用Angular的@ViewChild注释：import { Component, ViewChild } from '@angular/core';

import { Content } from 'ionic-angular';

@Component({...})

export class MyPage{

@ViewChild(Content) content: Content;

scrollToTop() {

this.content.scrollToTop();

}

}

实例成员：

addImg()

contentBottom

一个数字表示内容底部已经调整了多少个像素，可以通过填充或边距进行调整。这种调整是为了说明页脚所需的空间。

返回： number

contentHeight

可见区域的内容高度。这不包括在溢出区域之外的内容或页眉和页脚下的内容区域。只读。

返回： number

contentTop

一个数字表示内容顶部已经调整了多少个像素，可以通过填充或边距进行调整。此调整是为了解决标题所需的空间。

返回： number

contentWidth

内容宽度包括由于溢出而在屏幕上不可见的内容。只读。

返回： number

directionX

当前或最后已知的水平滚动方向。可能的字符串值包括right和left。

返回： string

directionY

当前或最后已知的垂直滚动方向。可能的字符串值包括down和up。

返回： string

getContentDimensions()

返回内容和滚动元素的维度。

返回： object

内容和滚动元素的尺寸属性类型细节dimensions.contentHeightnumber内容offsetHeight

dimensions.contentTopnumber内容偏移量

dimensions.contentBottomnumber内容offsetTop + offsetHeight

dimensions.contentWidthnumbercontent offsetWidth

dimensions.contentLeftnumber内容offsetLeft

dimensions.contentRightnumbercontent offsetLeft + offsetWidth

dimensions.scrollHeightnumber滚动scrollHeight

dimensions.scrollTopnumber滚动scrollTop

dimensions.scrollBottomnumber滚动ScrollTop + scrollHeight

dimensions.scrollWidthnumber滚动scrollWidth

dimensions.scrollLeftnumber滚动滚动

dimensions.scrollRightnumber滚动scrollLeft + scrollWidth

getFixedElement()

isScrolling

如果内容正在滚动或不正在滚动。

返回： boolean

resize()

告诉内容重新计算其尺寸。在动态添加/删除页眉，页脚或选项卡后，应该调用此操作。

scrollHeight

内容高度包括由于溢出而在屏幕上不可见的内容。只读。

返回： number

scrollLeft

内容左边距离最左边的可见内容。

返回： number

scrollTo(x, y, duration)

滚动到指定的位置。帕拉姆类型细节Xnumber要滚动到的x值。

ÿnumber要滚动到的y值。

持续时间number滚动动画的持续时间，以毫秒为单位。默认为300。可选的

返回： Promise

返回在滚动完成时解决的承诺。

scrollToBottom(duration)

滚动到内容组件的底部。帕拉姆类型细节持续时间number滚动动画的持续时间，以毫秒为单位。默认为300。可选的

返回： Promise

返回在滚动完成时解决的承诺。

scrollToTop(duration)

滚动到内容组件的顶部。

返回： Promise

返回在滚动完成时解决的承诺。

scrollTop

内容顶部距离最上方的可见内容。

返回： number

scrollWidth

内容宽度包括由于溢出而不可见的内容。只读。

返回： number

输入属性ATTR类型细节全屏boolean如果为true，内容将在页眉和页脚后面滚动。通过将工具栏设置为透明，可以很容易地看到此效果。

scrollDownOnLoadboolean如果为true，内容将在加载时向下滚动。

输出事件ATTR细节ionScroll每次滚动事件发生。

ionScrollEnd滚动结束时发出。

ionScrollStart滚动首次启动时发出。

滚动事件

滚动事件发生在Angular区域之外。这是出于性能原因。所以如果你试图绑定一个值到任何滚动事件，它将需要被包装在一个zone.run()import { Component, NgZone } from '@angular/core';

@Component({

template: `

Some realllllllly long content

`})

class E2EPage {

public scrollAmount = 0;

constructor( public zone: NgZone){}

scrollHandler(event) {

console.log(`ScrollEvent: ${event}`)

this.zone.run(()=>{

// since scrollAmount is data-binded,

// the update needs to happen in zone

this.scrollAmount++

})

}

这可以用于任何滚动事件，而不只是ionScroll。

调整内容大小

如果要更新布局的高度ion-header，ion-footer或ion-tabbar 动态更改，content.resize()必须调用Content。@Component({

template: `

Main Navbar

Dynamic Toolbar

Toggle Toolbar

`})

class E2EPage {

@ViewChild(Content) content: Content;

showToolbar: boolean = false;

toggleToolbar() {

this.showToolbar = !this.showToolbar;

this.content.resize();

}

}

滚动到特定位置import { Component, ViewChild } from '@angular/core';

import { Content } from 'ionic-angular';

@Component({

template: `

Down 500px

`

)}

export class MyPage{

@ViewChild(Content) content: Content;

scrollTo() {

// set the scrollLeft to 0px, and scrollTop to 500px

// the scroll duration should take 200ms

this.content.scrollTo(0, 500, 200);

}

}