Javascript 如何在离子页面顶部滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32483366/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to scroll at top of the page in ionic
提问by Rohit Deshmukh
currently i am working in ionic framework on javascript and angular-js i just put the search box and render list of customer but suppose in first attempt i can search with 'a' it shows all item which having alpha 'a' but the problem is when i scroll down to see the search result list and at the bottom if i want to search with 'd' this time it gives result but at the top of the page but my scroll is at the bottom of the page. So to solve the above problem i want set scroll position at the top of the page when search query is empty and display all customer so what should i do to solve this problem
目前我正在使用 javascript 和 angular-js 的 ionic 框架，我只是把搜索框和客户的渲染列表放在一起，但假设在第一次尝试时我可以用 'a' 搜索它显示所有具有 alpha 'a' 的项目，但问题是当我向下滚动以查看搜索结果列表时，如果我想在底部使用 'd' 进行搜索，它会给出结果，但在页面顶部，但我的滚动条位于页面底部。所以为了解决上述问题，我想在搜索查询为空时在页面顶部设置滚动位置并显示所有客户，那么我应该怎么做才能解决这个问题
thanks in adv..
感谢广告..
回答by Grégtheitroade Motot
You can try :
你可以试试 ：
$ionicScrollDelegate.scrollTop();
http://ionicframework.com/docs/api/service/$ionicScrollDelegate/
http://ionicframework.com/docs/api/service/$ionicScrollDelegate/
回答by Pavel Chuchuva
For Ionic 2 and higher use the scrollToTop()method on the content class.
对于 Ionic 2 及更高版本，请使用scrollToTop()内容类上的方法。
page.html
页面.html
<ion-content>
Add your content here!
</ion-content>
page.ts
页面.ts
import { Component, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';
@Component({...})
export class MyPage{
@ViewChild(Content) content: Content;
scrollToTop() {
this.content.scrollToTop();
}
}
See http://ionicframework.com/docs/api/components/content/Content/#scrollToTop
请参阅http://ionicframework.com/docs/api/components/content/Content/#scrollToTop
回答by Junaid
I normally do this on my home page.
我通常在我的主页上这样做。
import { Component, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';
@Component({...})
export class MyPage{
@ViewChild(Content) content: Content;
scrollToTop() {
this.content.scrollToTop(400);
}
ionViewDidEnter(){
this.scrollToTop();
}
}
Or you can call scrollTop() whenever you want. Note: 400 is duration in milliseconds, it is optional and you can use this as well
或者，您可以随时调用 scrollTop()。注意：400 是以毫秒为单位的持续时间，它是可选的，您也可以使用它
this.content.scrollToTop();
this.content.scrollToTop();
in this case scrollToTop() will set the default value of 300.
在这种情况下，scrollToTop() 将设置默认值 300。
回答by rtpHarry
For Ionic 4 this has been renamed from Contentto IonContent, along with a new package name:
对于 Ionic 4，它已从 重命名Content为IonContent，以及一个新的包名称：
Making the snippet look like this:
使代码片段看起来像这样：
import { Component, ViewChild } from '@angular/core';
import { IonContent } from '@ionic/angular';
@Component({...})
export class MyPage{
@ViewChild(IonContent) content: IonContent;
scrollToTop() {
this.content.scrollToTop(400);
}
ionViewDidEnter(){
this.scrollToTop();
}
}
Thanks @Junaid (https://stackoverflow.com/a/48987846/156388) for the base of this answer.
感谢 @Junaid ( https://stackoverflow.com/a/48987846/156388) 提供此答案的基础。
I didn't edit that answer as it's still valid for Ionic 2-3.
我没有编辑那个答案，因为它对 Ionic 2-3 仍然有效。
回答by Code Spy
For Ionic 4.X Latest Stable Release Try this
对于 Ionic 4.X 最新稳定版本试试这个
Source Link
源链接
In Page add Angular variable id on ion-contenttag
在页面中，在ion-content标签上添加 Angular 变量 ID
<ion-content
[scrollEvents]="true"
(ionScrollStart)="logScrollStart()"
(ionScroll)="logScrolling($event)"
(ionScrollEnd)="logScrollEnd()"
>
<ion-button (click)="ScrollToTop()">
Scroll To Top
</ion-button>
</ion-content>
In componentadd methods
在组件中添加方法
logScrollStart(){
console.log("logScrollStart : When Scroll Starts");
}
logScrolling(){
console.log("logScrolling : When Scrolling");
}
logScrollEnd(){
console.log("logScrollEnd : When Scroll Ends");
}
ScrollToBottom(){
this.content.scrollToBottom(1500);
}
ScrollToTop(){
this.content.scrollToTop(1500);
}
ScrollToPoint(X,Y){
this.content.scrollToPoint(X,Y,1500);
}
回答by Raj Sharma
The answer above will scroll all your views to top. If you want to have more control then you will have to use a delegate handler .
上面的答案会将您的所有视图滚动到顶部。如果您想拥有更多控制权，则必须使用委托处理程序。
First whatever you want to scroll you will have to add the delegate handler name
首先，无论您想滚动什么，您都必须添加委托处理程序名称
<ion-content delegate-handle="dashboard">
......
</ion-content>
In your controller you will have to use this handler
在您的控制器中，您将不得不使用此处理程序
$timeout(function(){$ionicScrollDelegate.$getByHandle('dashboard').scrollTop(false);});
I would recommend using a $timeout because if there is current digest cycle it will not work. Also change falseto trueif you want to animate the scroll. Lastly dont forget to inject $ionicScrollDelegateand $timeoutin your controller
我建议使用 $timeout ，因为如果有当前的摘要周期，它将不起作用。如果要为滚动设置动画，也将false更改为true。最后不要忘记在控制器中注入$ionicScrollDelegate和$timeout
