最近有个需求，就是非常简单地横向滑动。打算使用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效果干掉，那么就有思路了：
- 在滑到最左边或者最右边给Body绑定事件，组织默认行为
- 当手指抬起解绑事件
参考代码
具体参考代码如下：
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);
另外，使用原生滑动会出现滚动条，如果想达到极致体验的话，@靳磊给了两个思路：
- 外面套一层，给定高度+overflow:hidden;
- 加一个伪元素将滚动条遮起来
使用伪元素代码如下
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/