触摸结束后继续滚动

触摸结束后继续滚动

本文介绍了移动HTML:触摸结束后继续滚动的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在移动设备上创建了一个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:触摸结束后继续滚动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-16 05:56