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