移动HTML：触摸结束后继续滚动 [英] Mobile HTML: keep scrolling after touch is ended

问题描述

我在移动设备上创建了一个HTML列表：

I created a HTML list that I show on mobile devices:

<ul>
    <li>...</li>
    ...
</ul>

当我触摸显示并开始移动手指时，这个长列表也会滚动。然而，我想要实现的是，当我把手指移动离开屏幕，这个列表应该仍然滚动一会儿。如果你启动iPhone 5S本地电子邮件客户端，你可以看到这样的效果。

When I touch display and start moving my finger this long list will be also scrolled. However, what I want to achieve is that when I move my finger away from the screen, this list should still scrolling for a moment. If you start iPhone 5S native email client, you can see such effect.

现在，如果我从屏幕上移动我的手指，iPhone停止滚动immedeately，从可用性的角度来看，感觉良好。

Right now, if I move my finger from the screen, iPhone stop scrolling immedeately and it doesn't feel good from usability point of view.

CSS解决方案将是最好的一个，因为我试图减少我的移动应用程序中使用的JavaScript代码量。 p>

A CSS solution would be the best one because I try to reduce the amount of javascript code used in my mobile apps.

推荐答案

尝试：

body {
    -webkit-overflow-scrolling: touch;
} 

如果您的列表位于不同的滚动容器中，请添加 -webkit-overflow-scrolling：touch; 到该容器。

If your list is in a different scrolling container, then add -webkit-overflow-scrolling: touch; to that container as well.

这篇关于移动HTML：触摸结束后继续滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！