以编程方式停止-webkit-overflow-scrolling [英] Programmatically halt -webkit-overflow-scrolling

问题描述

我有一个phonegap应用程序，该应用程序使用iOS本机在div中的-webkit-overflow-scrolling中滚动.我希望能够在用户单击按钮时手动停止正在进行的滚动(以滚动回到页面顶部).这可行吗?

I have a phonegap application that uses iOS native scrolling through -webkit-overflow-scrolling in a div. I want to be able to manually halt an ongoing scroll when the user clicks a button (to scroll back to the top of the page). Is this doable?

推荐答案

使用 fastclick.js时，这实际上很有可能. lib消除了移动设备上300ms的点击延迟，并启用了惯性/动量滚动过程中的事件捕获.

This is actually very possible when using fastclick.js. The lib removes the 300ms click delay on mobile devices and enables event capturing during inertia/momentum scrolling.

在包含fastclick并将其附加到body元素之后，我停止滚动并转到顶部的代码如下:

After including fastclick and attaching it to the body element, my code to stop scrolling and go to the top looks like this:

scrollElement.style.overflow = 'hidden';
scrollElement.scrollTop = 0;
setTimeout(function() {
  scrollElement.style.overflow = '';
}, 10);

诀窍是设置overflow: hidden，这将停止惯性/动量滚动.请完整查看在惯性/动量期间停止滚动.

The trick is to set overflow: hidden, which stops the inertia/momentum scrolling. Please see my fiddle for a full implementation of stop scrolling during inertia/momentum.

这篇关于以编程方式停止-webkit-overflow-scrolling的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！