离子2 - 手指离开屏幕时不会触发滚动事件 [英] Ionic 2 - scroll event not fired when finger is off the screen

问题描述

我有一个带有标题的Ionic应用程序，我希望根据scrollTop调整大小。我在IonScroll上使用Ionic的滚动事件：

I have an Ionic app with a header that I want to resize based on scrollTop. I'm using Ionic's scroll event on IonScroll :

import { Scroll } from 'ionic-angular';  

@ViewChild(Scroll) scroll: Scroll;

...

ionViewDidLoad() {
    this.scroll.addScrollEventListener((ev) => {
        console.log('scroll');
    });
}

在iOS上，滚动事件在我将手指放在屏幕，但当手指离开屏幕时（但由于惯性而滚动仍在继续），只有当滚动停止时才会触发事件。

On iOS, the scroll event is fired perfectly when I keep my finger on the screen, but when the finger is off the screen (but the scrolling continues because of the inertia), the event is only fired when the scrolling stops.

有没有办法当手指离开屏幕时听到滚动事件（或任何其他类似事件）？

Is there a way to listen to the scroll event (or any other similar event) when the finger is off the screen ?

我发现这个问题，看似相似但没有任何问题回答： iOS滚动当手指离开屏幕时，事件不会经常触发

I found this question, which seems similar but doesn't have any answer: iOS scroll event not firing as often when finger is off of the screen

推荐答案

几个月前，我有类似的事情问题（在我的情况下，我想在向下滚动列表时显示/隐藏scrollToTop按钮。当手指在屏幕上时它会正常工作，但如果你放手则不行。

A couple of months ago I had a similar issue (in my case I wanted to show/hide a "scrollToTop" button when scrolling down a list. It would work fine when the finger was on screen, but not if you let it go.

底线是UIWebView的底线关于滚动和滚动检测的一些限制似乎是这些问题之一。请参阅： https://github.com/ionic-team/ionic/issues/10630

The bottom line is that the UIWebView has some limitations regarding scrolling and scroll-detection seems to be one of those issues. See: https://github.com/ionic-team/ionic/issues/10630

Ionic-Team建议的解决方案是使用WKWebView，因为那里不存在这些问题。

The solution that the Ionic-Team suggests is using WKWebView instead because these issues don't exist there.

https://github.com/ionic-team/cordova- plugin-wkwebview-engine

你可以尝试的最后一件事，虽然我很确定它不会对你的情况产生影响，但是正在运行您在NgZone中的代码：

One last thing you can try, although I'm pretty sure it won't make a difference in your case, is running your code in an NgZone:

import { NgZone } from '@angular/core';

export class myPage {
  zone: NgZone;

  constructor() {
    this.zone = new NgZone({enableLongStackTrace: false});

    this.content.ionScroll.subscribe(($event) => {
       this.zone.run(() => {
           // console.log($event);
       });
    });
  }
}

这篇关于离子2 - 手指离开屏幕时不会触发滚动事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！