JavaScript边缘效果

Question

我想知道在滚动边界时是否有任何JavaScript库可以在智能手机中执行相同的效果，

  

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

我在互联网上搜索但却找不到类似的内容。

Answer 1

如果您正在寻找弹性效果......

这种效果需要支持所谓的DOM元素过度滚动 - 实际上这意味着你应该能够将document.body.scrollTop设置为负值。但你不能在标准DOM中做到这一点：

＆＃13;

＆＃13;

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

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

您需要为document.body.scrollTop < 0设置动画才能获得动画弹性效果。

除了负滚动值之外，它还需要特殊类型的滚动条。默认的经典滚动条不是为了显示过度滚动位置而设计的。

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

就像我的Sciter我已经介绍了overlow:scroll-indicator; CSS属性来支持这样的轻量级滚动条，其中包含动画＆＃34;返回＆＃34;影响。这是在过度滚动时截取的屏幕截图（注意第一项是在列表的顶部）：

原则上在浏览器中，可以使用动画transform:translate()和自定义滚动条 - 艾利克绘图来实现这样的效果，但我还没有看到类似的东西......