将滚动条添加到顶部按钮(Ionic 2 | Typescript) [英] Add a scroll to top button (Ionic 2 | Typescript)
本文介绍了将滚动条添加到顶部按钮(Ionic 2 | Typescript)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
大家好,我想添加滚动到顶部按钮".实现以下内容:
Hi everyone i am trying to add "scroll to top button." that implement the following :
1.当用户向下滚动时显示按钮. 2.当用户向上滚动时隐藏按钮. 3.如果点击了该按钮,则滚动到顶部并隐藏该按钮. 关于如何正确使用的任何建议?
1.Show the button when user has scrolled down. 2.Hide the button when the user scrolls up. 3.If the button is tapped then scroll to the top and hide the button . any suggestion for how make it right way?
非常感谢
推荐答案
柱塞演示
要进行此工作,您需要:
Plunker Demo
To make this work you need to:
- 创建一个将
scroll-content
元素滚动到顶部的函数 - 跟踪
scroll-content
的滚动位置
- 使用滚动条上的
*ngIf
到顶部按钮,在scroll-content
达到特定阈值后有条件显示.
- Create a function that scrolls your
scroll-content
element to the top - Track the scroll position of
scroll-content
- Use
*ngIf
on your scroll to top button to conditionally show afterscroll-content
has reached a certain threshold.
我修改了此SO答案以应用于scroll-content
元素
scrollToTop(scrollDuration) {
let scrollStep = -this.ionScroll.scrollTop / (scrollDuration / 15);
let scrollInterval = setInterval( () => {
if ( this.ionScroll.scrollTop != 0 ) {
this.ionScroll.scrollTop = this.ionScroll.scrollTop + scrollStep;
} else {
clearInterval(scrollInterval);
}
}, 15);
跟踪scroll-content
位置
此示例使用窗口高度作为显示滚动到顶部按钮的阈值,如下所示:
Track scroll-content
position
This example uses the window height as the threshold for showing the scroll to top button like this:
this.ionScroll.addEventListener("scroll", () => {
if (this.ionScroll.scrollTop > window.innerHeight) {
this.showButton = true;
} else {
this.showButton = false;
}
});
按钮HTML
<button *ngIf="showButton" (click)="scrollToTop(1000)">Scroll Top</button>
完整组件打字稿
import { NavController } from 'ionic-angular/index';
import { Component, OnInit, ElementRef } from "@angular/core";
@Component({
templateUrl:"home.html"
})
export class HomePage implements OnInit {
public ionScroll;
public showButton = false;
public contentData = [];
constructor(public myElement: ElementRef) {}
ngOnInit() {
// Ionic scroll element
this.ionScroll = this.myElement.nativeElement.children[1].firstChild;
// On scroll function
this.ionScroll.addEventListener("scroll", () => {
if (this.ionScroll.scrollTop > window.innerHeight) {
this.showButton = true;
} else {
this.showButton = false;
}
});
// Content data
for (let i = 0; i < 301; i++) {
this.contentData.push(i);
}
}
// Scroll to top function
// Adapted from https://stackoverflow.com/a/24559613/5357459
scrollToTop(scrollDuration) {
let scrollStep = -this.ionScroll.scrollTop / (scrollDuration / 15);
let scrollInterval = setInterval( () => {
if ( this.ionScroll.scrollTop != 0 ) {
this.ionScroll.scrollTop = this.ionScroll.scrollTop + scrollStep;
} else {
clearInterval(scrollInterval);
}
}, 15);
}
}
完整组件HTML
<ion-navbar primary *navbar>
<ion-title>
Ionic 2
</ion-title>
<button *ngIf="showButton" (click)="scrollToTop(1000)">Scroll Top</button>
</ion-navbar>
<ion-content class="has-header" #testElement>
<div padding style="text-align: center;">
<h1>Ionic 2 Test</h1>
<div *ngFor="let item of contentData">
test content-{{item}}
</div>
</div>
</ion-content>
这篇关于将滚动条添加到顶部按钮(Ionic 2 | Typescript)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文