使用css布局 先使用overflow-x:auto;给UL加上一下css，做出横向滑动的效果： 123 overflow-x: auto;white-space: no
使用css布局
先使用overflow-x:auto;给UL加上一下css，做出横向滑动的效果：
123 | overflow-x: auto;white-space: nowrap;-webkit-overflow-scrolling: touch; |
这样，一个简单地滚动效果就实现了。如图
在UC浏览器安卓版下试验，不出所料的滑到最右边启用了UC上一页、下一页手势。
解决思路
经过无数次和@绍伟的试验，给
1 | body |
绑定
| |
事件，并且组织默认行为就能把UC效果干掉，那么就有思路了：
- 在滑到最左边或者最右边给Body绑定事件，组织默认行为
- 当手指抬起解绑事件
参考代码
具体参考代码如下：
123456789101112131415161718192021222324252627282930313233343536373839404142434445 | 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加速可以加上下句话：
1 | -webkit-transform:translateZ(0); |
另外，使用原生滑动会出现滚动条，如果想达到极致体验的话，@靳磊给了两个思路：
- 外面套一层，给定高度+overflow:hidden;
- 加一个伪元素将滚动条遮起来
使用伪元素代码如下
12345678910 | ul::after { display: block; content: ""; position: absolute; z-index: 10; width: 100%; background-color: #fff; height: 10px; margin-top : -11px;} |
总结
对于一个问题一个人思考思维会很局限，和大家一起讨论完成学到了很多解决的办法，能将任务完成最优而且增进团队的融合性。
更新 2015年12月14日
隐藏滚动条还有更好地方法
123 | ul::-webkit-scrollbar { display: none; } |
主要解决背景非纯色而是虚化这样的需求，uc下有效，但是safari下还是会出现滚动条，有点小遗憾。
