移动端-纵向惯性移动

借助前期封装的transformCSS.js

<script src="transformCSS.js"></script>

css

<style>
        * {
            padding: 0;
            margin: 0;
        }
        
        #header {
            height: 10vh;
            background: rgba(0, 0, 0, 0.8);
            text-align: center;
            line-height: 10vh;
            color: white;
            font-size: 20px;
        }
        
        #main {
            width: 100vw;
            height: 90vh;
            overflow: hidden;
        }
        
        ul li {
            box-sizing: border-box;
            height: 10vh;
            line-height: 10vh;
            font-size: 16px;
            padding-left: 10px;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
        }
    </style>

 

html

<div id="app">
        <div id="header">通讯录</div>
        <main id="main">
            <ul id="content"></ul>
        </main>
    </div>

javascript

<script>
        // 获取变量
        var app = document.querySelector('#app');
        var main = document.querySelector('#main');
        var content = document.querySelector('#content');
        // 添加内容
        var names = ['勾诗桃', '连盼山', '咸从筠', '许雅容', '徐云霞', '晏新苗', '文星星', '许忆雪', '禄芷秀', '须苇然', '晃觅风', '万雅晗', '贡合瑞', '廖珺琪', '沈安蕾', '杨安波', '朱天悦', '卓梓美', '车妍妍', '潘晓彤', '幸平乐', '须惜香', '邵令美', '逢千束', '通怜珊', '苍语雪', '堵鸣晨', '汤红叶', '彭荏苒', '龙秋芸', '沃香巧', '从列琴', '潘平安', '禄秋芸'];
        names.forEach(function(name) {
            var li = document.createElement('li');
            li.innerHTML = name;
            content.appendChild(li);
        });
        // 添加touch事件
        main.addEventListener('touchstart', function(event) {
            main.t = transformCSS(content, 'translateY');
            main.y = event.changedTouches[0].clientY;
            main.startTIme = Date.now();
            content.style.transition = 'none';
        });
        main.addEventListener('touchmove', function(event) {
            main._y = event.changedTouches[0].clientY;
            newTop = main._y - main.y + main.t;
            transformCSS(content, 'translateY', newTop);
        });
        main.addEventListener('touchend', function(even) {
            // 惯性移动
            // 结束事件
            main.endTime = Date.now();
            // 元素结束位置
            main._y = event.changedTouches[0].clientY;
            // 距离差
            var distanceY = main._y - main.y;
            // 时间
            var distanceTime = main.endTime - main.startTIme;
            // 判断停留时间 时间过短则直接跳出 不执行后面的代码
            if (distanceTime >= 300) {
                return;
            }
            // 速度
            var v = distanceY / distanceTime;
            // 距离
            var s = v * 200;
            // 元素结束时偏移量
            var translateY = transformCSS(content, 'translateY');
            // 惯性移动后的距离
            translateY += s;
            // 设置css样式
            content.style.transition = 'all 5s ease-out';
            transformCSS(content, 'translateY', translateY);

        });
    </script>