touchstart、touchmove、touchend事件監聽的滾動實現

時間 2019-12-04

標籤 touchstart touchmove touchend 事件監聽滾動實現简体版

原文原文鏈接

前言

在開始上代碼以前想實現一個簡單的利用滾輪滾動的效果，順便把裸露的醜陋滾動條給遮掉。javascript

鼠標滾動代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <title></title>
        <style>
            body,html{ margin: 0; padding:0; }
            .img_scroll{
                height: 200px;
                width: 100%;
                overflow: hidden;
            }
            .img_box{
                width: 100%;
                height: 240px;
                overflow-y: hidden;
                white-space: nowrap; 
            }
            .img_box div{
                width: 200px;
                height: 200px;
                background-size: cover;
                background-position: center;
                margin-right: 15px;
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <div class="img_scroll">
            <div class="img_box">
            </div>
        </div>
        <script type="text/javascript" src="js/zepto.min.js"></script>
        <script>
            var data = [
                'img/03_05.png',
                'img/03_06.png',
                'img/04_01.png',
                'img/04_02.png',
                'img/04_03.png',
                'img/04_04.png',
                'img/04_05.png',
                'img/04_06.png',
                'img/04_07.png'
            ];
            var str = '';
            $.each(data, function(i, item){
                str += '<div style="background-image: url('+item+')"></div>'
            })
            $(".img_box").append(str);
        </script>
    </body>
</html>

touch事件滾動代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <title></title>
        <style>
            body,html{ margin: 0; padding:0; }
            .img_scroll{
                height: 160px;
                width: 100%;
                overflow: hidden;
            }
            .img_box{
                width: 100%;
                padding-left: 15px;
                height: 200px;
                display: -webkit-box;
                font-size: 0;
            }
            .img_box div{
                width: 160px;
                height: 160px;
                background-size: cover;
                background-position: center;
                margin-right: 15px;
            }
        </style>
    </head>
    
    <body>
        <div class="img_scroll">
            <div class="img_box">
            </div>
        </div>
        <script type="text/javascript" src="js/zepto.min.js"></script>
        <script>
        (function(){
            var data = [
                'img/03_05.png','img/03_06.png','img/04_01.png',
                'img/04_02.png','img/04_03.png','img/04_04.png',
                'img/04_05.png','img/04_06.png','img/04_07.png'
            ];
            var str = '';
            $.each(data, function(i, item){
                str += '<div style="background-image: url('+item+')"></div>'
            })
            $(".img_box").append(str);
            
            //如下代碼建議封裝一下，太多變量了
            var len = data.length * (160+15) + 15;  //
            var d = window.screen.width - len;
            var startX = 0;    //相對於屏幕開始所處位置
            var iX = 0;        //移動了多少位置
            var isStartX = 0;  //相對於父元素開始所處位置
            var dist = 0;      //移動的距離
            $('.img_scroll').on('touchstart','.img_box',function(e){
                e.stopPropagation();
                $('.img_box').css('-webkit-transition',"none");
                startX = e.touches[0].pageX;
                iStartX = iX;   
            }).on('touchmove','.img_box',function(e){
                e.stopPropagation();
                dist = e.touches[0].pageX - startX;
                iX = iStartX + dist;
                if( iX>=0 ){
                    iX = 0;
                }else if( iX<=d ){
                    iX = d;
                }
                ruleMove()
            }).on('touchend','.img_box',function(e){
                $('.img_box').css('-webkit-transition',"all 0.5s");
                e.stopPropagation();
                ruleMove();
            }).on('touchcancel', '.img_box',function(e){
                ruleMove();
            })
            function ruleMove(){
                $('.img_box').css('-webkit-transform', 'translate3d(' + iX + 'px,0,0)');
            }
        })()
        </script>
    </body>
</html>

結束語

touch事件在移動端的使用比較常見，代碼實現原理和上述相似，可是用的過程當中仍是要注意性能優化和流暢性。比較常見的有swiper場景，有興趣的同窗能夠本身手動操做，有時間我也會補充。css

相關標籤/搜索

touchstart+touchmove+touchend

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。