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

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

这样，一个简单地滚动效果就实现了。如图

css滑动

在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/

posted @ 2017-03-14 16:40  Fien  阅读(493)  评论(0)  编辑  收藏  举报