Maison > Questions et réponses > le corps du texte
https://jhs.m.taobao.com/m/index.htm?locate=icon-2&spm=a215s.7406091.1.icon-2&scm=2027.1.3.1001#!3000
上面的横向滚动条,滑到边界就会有个拉伸的效果,然后再反弹回去
用css3和js该怎么实现
巴扎黑2017-04-17 11:40:59
下面的JS代码可以作为参考,不仅可以实现回弹,还能反应出来手势的快速滑动。
<script type="text/javascript">
//得到各种元素
var nav = document.querySelector("nav");
var navul = document.querySelector("nav ul");
var navullis = document.querySelectorAll("nav ul li");
var navW = parseInt(window.getComputedStyle(nav , null)['width']);
//宽度
navul.style.width = navullis.length * 82 +"px";
nav.addEventListener("touchstart",touchstartHandler);
nav.addEventListener("touchmove",touchmoveHandler);
nav.addEventListener("touchend",touchendHandler);
var startX;
var nowX = 0;
var dX;
var lastTwoPoint = [0,0];
//开始滑动
function touchstartHandler(event){
navul.style.webkitTransition = "none"; //去掉过渡
navul.style.transition = "none"; //去掉过渡
startX = event.touches[0].pageX; //记录起点
}
//滑动过程
function touchmoveHandler(event){
event.preventDefault();
dX = event.touches[0].pageX - startX; //差值
//反映差值
navul.style.webkitTransform = "translateX(" + (nowX + dX) + "px)";
navul.style.transform = "translateX(" + (nowX + dX) + "px)";
//记录最后两点的x值
lastTwoPoint.shift();
lastTwoPoint.push(event.touches[0].pageX);
}
//结束滑动
function touchendHandler(event){
nowX += dX;
//多走最后两点路程的5倍路程
nowX += (lastTwoPoint[1] - lastTwoPoint[0]) * 5;
if(nowX > 0){
nowX = 0;
}
if(nowX < -parseInt(navul.style.width) + navW){
nowX = -parseInt(navul.style.width) + navW;
}
console.log(-parseInt(navul.style.width) + navW)
//过渡时间
//非线性衰减
var t = Math.sqrt(Math.abs(lastTwoPoint[1] - lastTwoPoint[0])) / 10;
navul.style.webkitTransition = "all " + t + "s cubic-bezier(0.1, 0.85, 0.25, 1) 0s";
navul.style.transition = "all " + t + "s cubic-bezier(0.1, 0.85, 0.25, 1) 0s";
//反映多走的5倍路程:
navul.style.webkitTransform = "translateX(" + nowX + "px)";
navul.style.transform = "translateX(" + nowX + "px)";
}
</script>
ringa_lee2017-04-17 11:40:59
你是说弹性滚动吗
body{
overflow:scroll;
-webkit-overflow-scrolling:touch
}
黄舟2017-04-17 11:40:59
最近我也在用IScroll 做项目,发现越多来安卓5.0以后的有部分手机不兼容,特别是在做单页面的时候,最近我在用这个Swiper [1]: http://www.swiper.com.cn/ ,文档是中文的,出了几个版了,目前还没有碰到有兼容的问题