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该怎么实现
走同样的路,发现不同的人生
局部滾動的話 最簡單的方法就是用 IScroll 。直接實例化 就可以。 new IScroll("",) ""裡面是選擇器。
下面的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>
iscroll 就能做這個效果。如果你是問原生實作的話,可以去看看原始碼。 傳送門
你是說彈性滾動嗎
body{ overflow:scroll; -webkit-overflow-scrolling:touch }
最近我也在用IScroll 做項目,發現越多來安卓5.0以後的有部分手機不相容,特別是在做單頁的時候,最近我在用這個Swiper [1]: http://www .swiper.com.cn/ ,文檔是中文的,出了幾個版了,目前還沒有碰到有兼容的問題
局部滾動的話 最簡單的方法就是用 IScroll 。直接實例化 就可以。 new IScroll("",) ""裡面是選擇器。
下面的JS程式碼可以作為參考,不僅可以實現回彈,還能反應出來手勢的快速滑動。
iscroll 就能做這個效果。如果你是問原生實作的話,可以去看看原始碼。
傳送門
你是說彈性滾動嗎
最近我也在用IScroll 做項目,發現越多來安卓5.0以後的有部分手機不相容,特別是在做單頁的時候,最近我在用這個Swiper [1]: http://www .swiper.com.cn/ ,文檔是中文的,出了幾個版了,目前還沒有碰到有兼容的問題