在移動端上使用原生滑屏解決方案

最近有個需求，就是很是簡單地橫向滑動。打算使用overflow-x:auto;來試驗原生滑動，但在安卓版UC下當滑到最左或者最右會默認啓用UC上一頁、下一頁手勢

致使頁面的跳轉（原生瀏覽器無此手勢）。以前好幾個項目以前視頻有使用js處理(query: 夏洛特煩惱), 橫向滑動沒有加慣性支持，很是卡頓。感受此類對距離沒有要求的滑動用原生最好，並且overflow-x:auto;兼容性支持到安卓2.1以上，使用起來也很是方便，因此打算在UC下作一下適配。

 

使用css佈局

先使用overflow-x:auto;給UL加上一下css，作出橫向滑動的效果：

1 2 3

overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;

這樣，一個簡單地滾動效果就實現了。如圖

在UC瀏覽器安卓版下試驗，不出所料的滑到最右邊啓用了UC上一頁、下一頁手勢。

解決思路

通過無數次和@紹偉的試驗，給body綁定touchmove事件，而且組織默認行爲就能把UC效果乾掉，那麼就有思路了：

1. 在滑到最左邊或者最右邊給Body綁定事件，組織默認行爲
2. 當手指擡起解綁事件

參考代碼

具體參考代碼以下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

var preventUCDefault = (function() { var ua = window.navigator.userAgent, startX = 0, diffY = 0, bindPreventTouch = function() { $(document.body).on('touchmove.prevUC', function(e) { e.preventDefault(); }); }, isAndroid = (function() { //https://github.com/amfe/lib-env/blob/master/src/browser.js#L70 return (!!ua.match(/(?:UCWEB|UCBrowser\/)([\d\.]+)/) && !!ua.match(/Android[\s\/]([\d\.]+)/)); })(); return { init : function(ul) { if(isAndroid) { var scrollWidth = ul[0].scrollWidth; ul.on('touchstart.prevUC', function(e) { startX = e.touches[0].pageX; }); ul.on('touchmove.prevUC',function(e) { diffY = e.touches[0].pageX - startX; if($(this).scrollLeft() == 0 && diffY > 0) { //到最左 bindPreventTouch(); }else if((scrollWidth - $(this).scrollLeft() - ul.width()) === 0 && diffY < 0) { //到最右 bindPreventTouch(); } }); ul.on('touchend.prevUC',function(e) { $(document.body).off('touchmove.prevUC'); }); } } } })(); preventUCDefault.init(scope.find('.slide-image ul'));

通過QA測試，低版本UC下滑動效果也很不錯呢！

優化

固然，想開啓gpu加速能夠加上下句話：-webkit-transform:translateZ(0);

另外，使用原生滑動會出現滾動條，若是想達到極致體驗的話，@靳磊給了兩個思路：

1. 外面套一層，給定高度+overflow:hidden;
2. 加一個僞元素將滾動條遮起來

使用僞元素代碼以下

1 2 3 4 5 6 7 8 9 10

ul::after { display: block; content: ""; position: absolute; z-index: 10; width: 100%; background-color: #fff; height: 10px; margin-top : -11px; }

轉載自http://www.hacke2.cn/scroll-in-uc/