1.移动端的滑动
/* 列表的父盒子，限制宽高 */ /* 注意设置overflow: hidden;样式后，超出这个盒子的ul将不会显示 */ .draw { width: 60px; height: 500px; border: 2px solid #ccc; overflow: hidden; position: fixed; left: 10px; top: 50%; transform: translateY(-50%); } /* li 设置了浮动， 所以 ul 要清除浮动 */ ul:after { content: ""; display: block; visibility: hidden; height: 0; clear: both; } ul { zoom: 1; } li { list-style: none; float: left; width: 60px; height: 60px; line-height: 60px; text-align: center; } <div class="draw" id="draw"> <ul> <li style="background:orange">列表一</li> <li style="background:yellowgreen">列表二</li> <li style="background:yellow">列表三</li> <li style="background:cyan">列表四</li> <li style="background:orangered">列表五</li> </ul> </div> <script> var draw = document.querySelector('#draw'); var ul = draw.children[0]; var startY = 0; // 刚触碰到屏幕的时的手指信息 var centerY = 0; // 用来记录每次触摸时上一次的偏移距离 var maxDown = 50; // 设定一个最大向下滑动的距离 var maxUp = -(ul.offsetHeight - draw.offsetHeight + maxDown); // 求得一个最大向上滑动的距离 var maxUpBounce = 0; // 向上反弹值 var maxDownBounce = -(ul.offsetHeight - draw.offsetHeight); // 向下反弹值 // touchstart 时，记录手指在 Y 轴上的落点距离可视顶部距离 ul.addEventListener('touchstart', function (e) { startY = e.changedTouches[0].clientY; }) // touchmove 时，记录此时手指在 Y 轴上的落点距离可视顶部距离 ul.addEventListener('touchmove', function (e) { ul.style.transition = 'none'; // 清除过渡 var dy = e.changedTouches[0].clientY - startY; // 获取差值 var tempY = centerY + dy; // 上次的滑动距离加上本次的滑动距离 if (tempY > maxDown) { // 当上次滑动的距离加上本次滑动的距离 大于 设定的最大向下距离的时候 tempY = maxDown; } else if (tempY < maxUp) { // 当上次滑动的距离加上本次滑动的距离 小于设定的最大向上距离的时候 tempY = maxUp; } ul.style.transform = 'translateY(' + tempY + 'px)'; // 设置 ul 在 Y 轴上的偏移 }) // touchend 时，记录此时手指在 Y 轴上的落点距离可视顶部距离 ul.addEventListener('touchend', function (e) { var dy = e.changedTouches[0].clientY - startY; // 获取差值 centerY = centerY + dy; // 记录移动的距离 if (centerY > maxUpBounce) { // 两次滑动的距离 大于 设定的 向上 反弹值时 centerY = maxUpBounce; // 让两次滑动的距离 等于 设置的值 } else if (centerY < maxDownBounce) { // 两次滑动的距离 小于 设定的 向下 反弹值时 centerY = maxDownBounce; // 让两次滑动的距离 等于 设置的值 } ul.style.transition = 'transform .5s'; // 添加过渡 ul.style.transform = 'translateY(' + centerY + 'px)'; }) </script>2.PC端的滚动条上下滚动加载数据
<style> .container { width: 700px; border: 1px solid #f00; margin-left: 300px; } #content-list { height:700px; overflow: scroll; } #content-list li{ height: 80px; border-bottom: 1px solid #ccc; } </style> <body> <div class="container"> <ul id="content-list"> </ul> </div> </body> <script> var con = document.getElementById('content-list'); var sh, ch; var arr = ['aaa','aaa','aaa','aaa','aaa','aaa','aaa','aaa','aaa','aaa','aaa','aaa']; var a, html; a = location.search.split("=")[1]; renderHtml(); function renderHtml() { html="<li>会话开始啦</li>"; for(var i = 0; i < arr.length; i++) { html = html + "<li>" + arr[i] + i + "</li>"; } con.innerHTML = html; } if(a == 1) { // 页面滚动在最下面，只有这种情况才有滑倒顶部的加载 con.scrollTop = con.scrollHeight; con.addEventListener('scroll', function() { if(this.scrollTop < 10) { topTip(); } }) }else { // 页面滚动在最上面，可上下加载 con.scrollTop = 50; con.addEventListener('scroll', function() { var allH = this.scrollTop + con.clientHeight; sh = con.scrollHeight; if(this.scrollTop < 10) { topTip(); } if(sh - allH <= 100) { bottomTip(); } }) } function topTip() { con.scrollTop = 50; arr.unshift("cccc"); renderHtml(); } function bottomTip() { arr.push("bbbb"); renderHtml(); } </script>
