我有一个通过 cordova/phonegap 在 iOS 上运行的 React 应用程序。
在一个组件中,我有一个工具栏,一旦滚动经过它,它就会粘在屏幕顶部:
<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>
你明白了。
每当用户滚动时,就会计算 Y 位置,如果它低于偏移量,工具栏就会获得一个“粘性”类,并通过 CSS 将其固定在顶部:
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;
}
现在,这一切都适用于 Chrome/Safari,但在 iOS/Cordova 上,动量滚动期间不会触发滚动事件。因此,如果用户在按住屏幕的同时滚动超过偏移限制,那很好,因为touchmove
事件不断触发。但是,如果用户滚动一点,释放屏幕,并且动量/惯性滚动使视图滚动超过偏移量,则在滚动结束之前不会发生任何事情(因为然后scroll
事件被触发)。
问题:
是否有一个单独的事件我可以收听,或者是否有 Cordova
使 javascript 在惯性/动量期间执行的设置
滚动?
设置间隔()
我还尝试在 touchend 上设置一个间隔(用户停止滚动/触摸)并稍后将其删除,但似乎在动量/惯性滚动期间,根本没有运行任何 JavaScript:setInterval 在此期间不会执行。