JavaScript边缘效应

Question

我想知道是否有任何JavaScript库可以在智能手机上发挥同样的作用，

当用户在2D空间中滚动超出内容界限时，可滚动小部件边缘使用的图形效果。https://developer.android.com/reference/android/widget/EdgeEffect.html

我正在网上搜索，但还没有找到这样的东西。

Answer 1

如果你在寻找弹性效应..。

这种效果需要对DOM元素提供所谓的超滚动支持--本质上它意味着您应该能够将document.body.scrollTop设置为负值。但是，不能在标准DOM中这样做：

​

$(function() {
  document.body.scrollTop = -20;
  $("#sp").html("Scroll position=" + document.body.scrollTop);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id=sp>
  Scroll position
</div>

​

您将需要动画document.body.scrollTop < 0以实现动画弹性效果。

除负滚动值外，还需要特殊类型的滚动条。默认的经典滚动条不是用来显示超滚动位置的。

理想情况下，为了达到这样的效果，您需要浏览器支持。

就像在我的斯奎特中一样，我引入了overlow:scroll-indicator; CSS属性，以支持具有动画“回溯”效果的轻量级滚动条。下面是在超滚动时拍摄的截图(注意，第一项不在列表的首位)：

​

​

原则上，在浏览器中使用动画transform:translate()和自定义滚动条-ailike绘图可以达到这样的效果，但我还没有见过这样的效果.