Which event to listen to during inertia/momentum scroll on Cordova iOS w/ React

问题

I have a React app running on iOS through cordova/phonegap.

In one component, I have a toolbar that sticks to the top of the screen once you scroll past it:

<div id="content">Some stuff in here</div>
<div id="tool-bar">
    <div class="tool">Tool 1</div>
    <div class="tool">Tool 2</div>
</div>
<div id="some-stuff-below-toolbar">Stuff</div>

You get the picture.

Whenever the user scrolls, the Y position is calculated, and if it's below the offset, the tool bar gets a class 'sticky' and CSS to fix it to the top:

ReactJS:

componentDidMount() {
    document.addEventListener('scroll', this.updateScrollY);
    document.addEventListener('touchmove', this.updateScrollY);
}

updateScrollY() {
    const current_y = window.pageYOffset || document.documentElement.scrollTop;

    this.setState({...this.state, current_y});
}

render() {
    let classNames = '';
    if(this.state.current_y >= this.state.offset) {
        classNames = 'sticky';
    }

    return(...some JSX...
        <div id='tool-bar' className={classNames}> ... etc more JSX);  
}

CSS:

.sticky {
    position: fixed;
    top: 0px;
    left: 0px;
}

Now, this all works in Chrome/Safari, but on iOS/Cordova, the scroll event is not fired during momentum scrolling. So, if a user scrolls past the offset limit whilst holding the screen, fine, because the touchmove event keeps firing. However, if the user scrolls for a bit, releases the screen, and the momentum / inertia scrolling makes the view scroll past the offset, nothing happens until the scroll ends (because then the scroll event is fired).

Question:

Is there a separate event I can listen for, or is there a Cordova setting that makes javascript execute during inertia/momentum scrolling?

setInterval()

I've also tried setting an interval on touchend (the user stopped scrolling/touching) and removing it later, but it seems that during momentum/inertia scrolling, no javascript is ran at all: the setInterval doesn't execute during that time.

来源：https://stackoverflow.com/questions/44798796/which-event-to-listen-to-during-inertia-momentum-scroll-on-cordova-ios-w-react

标签

javascript

ios

cordova

reactjs

phonegap