javascript - 移动端弹性滚动效果有哪些实现方式？

问题描述

问 题

//iScroll.js的做法
<div id="wrapper">
    <div id="scroller" style="transform: translate(0px, -18px);">
        <ul>
            <li>Pretty row 1</li>
            <li>Pretty row 2</li>
            <li>Pretty row 3</li>
            <li>Pretty row 4</li>
            <li>Pretty row 5</li>
        </ul>
    </div>
</div>

iScroll.js这种做法比较常见，还有其他做法吗?

解决方案

iscroll应该是惯性滚动效果，原理是根据滑动的时间和距离的关系计算出滚动初速度，然后慢慢递减至0就行了。
弹性效果的话应该是到底后继续拉会有弹簧一样的效果，这个你根据 力学公式 进行计算就行了，给个弹力系数，给个弹力基本值，然后计算出对应的x

这篇关于javascript - 移动端弹性滚动效果有哪些实现方式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！