使用 Javascript 模拟原生滚动

Posted 2023-03-14

【中文标题】使用 Javascript 模拟原生滚动

【英文标题】：Mimic native scrolling using Javascript

【发布时间】：2011-07-24 12:54:56

【问题描述】：

哪些 javascript 库可用于模拟 ios 设备（主要是 iPad）上的本机滚动行为，即使是基于 jQuery 的库也可以。

在你说之前，我知道最常见的是 iScroll https://github.com/cubiq/iscroll 但我想知道更多...

请尽可能多地列出。谢谢你。

【参考方案1】：

所以 IOS 5 webkit 现在具有原生滚动功能。但它仍然存在一些问题，特别是如果你想获得一种“应用程序”的感觉。

使用这个 CSS 激活原生滚动。

.scrollme 
   -webkit-overflow-scrolling: touch;
   overflow:auto;

问题是，如果你在 div 已经在其容器的“顶部”时向下拖动，你最终会导致整个 html 文档滚动弹跳，这可能会在你不想要的时候暴露浏览器 chrome到。但是，有一个纯 CSS 的解决方法（没有 javascript）。您可以使用一组 3 个嵌套 div。将外部 2 设置为“scrolling:touch”，您可以获得相当“原生”的感觉。

此处的示例代码：https://gist.github.com/1372229

与“position:fixed”属性一起，这对简化事情大有帮助。

【参考方案2】：

Scrollability by Joe Hewitt 是一个最近开发的实现，它很好地模仿了 iOS 设备上的原生滚动。然而，他自己承认这是一个“进行中的工作”，还没有准备好用于生产。

此外，iOS 5 将通过-webkit-overflow-scrolling: touch CSS 属性和值直接支持原生滚动。将其与元素上的overflow: scroll 一起设置将使滚动的行为类似于在本机应用程序中滚动面板：一根手指，本机风格的动量和行为。基本上所有需要大量 JavaScript 的东西都可以用两个 CSS 属性替换。

缺点是，由于它仅在 iOS 测试版中，您仍然必须使用脚本作为后备，直到 iOS 5 成为主流（不仅仅是发布），android 采用它（并且发布成为主流）等。我们还需要一段时间的后备。

您可以在FunctionSource 和this blog 获得更多详细信息。同样，这在今天还没有用，但会在接下来的 6 到 12 个月内有用（对于其他平台可能更长）。

【讨论】：

非常感谢您的回复.. 不过只有一个问题....当您说 iOS 5 将通过 -webkit-overflow-scrolling: touch CSS 属性提供直接的本机滚动支持时... ..这到底是什么意思？这是否意味着我们可以将该属性应用于任何元素，例如一个固定高度的 div...如果是的话，我们无论如何都会得到固定高度的 div 以在带有 2 根手指的 IOS 设备上滚动...您能否详细说明那部分...因为我认为 IOS5 不是很远。 ..

但可滚动性使页面“弹跳”（在 safari 移动设备上，您可以在 web 视图下看到灰色的东西）。这似乎不是原生的

【参考方案3】：

这是一个有趣的 Touch 和 Touch-Scroll Javascript 库列表：

https://github.com/bebraw/jswiki/wiki/Touch