我想知道在跨界滚动时是否有任何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属性来支持具有动画“回头”效果的轻量级滚动条。这是过度滚动时拍摄的屏幕截图(请注意,第一项不在列表顶部):原则上,在浏览器中,可以使用动画
transform:translate()
和自定义滚动条类似的图形来实现这种效果,但是我还没有看到类似的东西...