css3 - 淘宝网上这种抵抗反弹的效果如何做?
问题描述
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该怎么实现
问题解答
回答1:局部滚动的话 最简单的方法就是用 IScroll 。直接实例化 就可以。new IScroll('',) ''里面是选择器。
回答2:下面的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>回答3:
iscroll 就能做这个效果。如果你是问原生实现的话,可以去看看源码。传送门
回答4:你是说弹性滚动吗
body{ overflow:scroll; -webkit-overflow-scrolling:touch}回答5:
最近我也在用IScroll 做项目,发现越多来安卓5.0以后的有部分手机不兼容,特别是在做单页面的时候,最近我在用这个Swiper [1]: http://www.swiper.com.cn/ ,文档是中文的,出了几个版了,目前还没有碰到有兼容的问题
相关文章:
1. docker images显示的镜像过多,狗眼被亮瞎了,怎么办?2. angular.js - angular内容过长展开收起效果3. macos - mac下docker如何设置代理4. docker-compose 为何找不到配置文件?5. 在windows下安装docker Toolbox 启动Docker Quickstart Terminal 失败!6. 在mac下出现了两个docker环境7. PHP中的$this代表当前的类还是方法?8. dockerfile - [docker build image失败- npm install]9. java - 我用Tomcat访问SQL server数据库时,出现以下错误,该怎么解决?10. docker绑定了nginx端口 外部访问不到