我想知道在跨界滚动时是否有任何JavaScript库可以在智能手机中实现相同的效果,


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


我正在互联网上搜索它,但找不到类似的东西。

最佳答案

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

这种效果需要对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设置动画,以实现动画弹性效果。

除了负滚动值之外,它还需要特殊类型的滚动条。默认经典滚动条不适用于显示过度滚动位置。

理想情况下,为了实现这种效果,您将需要浏览器支持。

就像在我的Sciter中一样,我引入了overlow:scroll-indicator; CSS属性来支持具有动画“回头”效果的轻量级滚动条。这是过度滚动时拍摄的屏幕截图(请注意,第一项不在列表顶部):

javascript - JavaScript边缘效果-LMLPHP

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

07-24 17:46