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. 在html文件的目錄下輸入代碼按回車后顯示這個，哪位大佬幫幫我 呀2. javascript - 微信網頁開發從菜單進入頁面后，按返回鍵沒有關閉瀏覽器而是刷新當前頁面，求解決？3. node.js - nodejs開發中常用的連接mysql的庫4. 老師您的微信號是多少？5. mysql - jdbc的問題6. python - 在使用Pycharm時經常看到如下的樣式，小括號里紅色的部分是什么意思呢？7. 視頻文件不能播放，怎么辦？8. mysql - 分庫分表、分區、讀寫分離 這些都是用在什么場景下 ，會帶來哪些效率或者其他方面的好處9. windows7 ping不通虛擬機VMware上的linux（ubuntu）的ip10. mysql - 如何減少使用或者不用LEFT JOIN查詢？
網公網安備