在移动端上使用原生滑屏解决方案

最近有个需求，就是非常简单地横向滑动。打算使用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/

转载于:https://www.cnblogs.com/zhongfufen/p/6549278.html