移動端網頁自定義滾動條 - samwu－IT工程師數位筆記本

文章出處

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta id="viewport" name="viewport" content="initial-scale=1.0,user-scalable=no,
                  minimum-scale=1.0, maximum-scale=1.0">
    <title>移動端網頁自定義滾動條</title>
    <style type="text/css">
        #outer_div{
            width: 100px;
            height: 100px;

            /*position: absolute;*/
        }
        .inner_div{
            width: 100px;
            height: 100px;
            border: 1px solid #efefef;
        }
    </style>
</head>
<body>
<div>
我的開發經驗是，橫向滾動可以用overflow-x:scoll;<br />
然而豎向滾動，當滾到底時，會帶動整張頁面。原諒我這里忘了測試，好像iphone不會帶動，android會帶動。<br />
這時候你要自己寫滾動。
</div>
<div id="outer_div">
    <div class="inner_div">1</div>
    <div class="inner_div">2</div>
    <div class="inner_div">3</div>
    <div class="inner_div">4</div>
    <div class="inner_div">5</div>
    <div class="inner_div">6</div>
    <div class="inner_div"></div>
    <div class="inner_div"></div>
    <div class="inner_div"></div>
    <div class="inner_div"></div>
    <div class="inner_div"></div>
    <div class="inner_div"></div>
    <div class="inner_div"></div>
    <div class="inner_div"></div>
</div>

<script type="text/javascript">
var gundongX = 0;
var gundongY = 0;
var d = document;
var g = 'getElementById';
var moveEle = d[g]('outer_div');
var stx = sty = etx = ety = curX = curY = 0;

moveEle.addEventListener("touchstart", function(event) { //touchstart
    gundongX = 0;
    gundongY = 0;


    // 元素當前位置
    etx = parseInt(getT3d(moveEle, "x"));
    ety = parseInt(getT3d(moveEle, "y"));

    // 手指位置
    stx = event.touches[0].pageX;
    sty = event.touches[0].pageY;
}, false);

moveEle.addEventListener("touchmove", function(event) {
    // 防止拖動頁面
    event.preventDefault();

    // 手指位置 減去 元素當前位置 就是 要移動的距離
    gundongX = event.touches[0].pageX - stx;
    gundongY = event.touches[0].pageY - sty;

    // 目標位置 就是 要移動的距離 加上 元素當前位置
    curX = gundongX + etx;
    curY = gundongY + ety;

    // 自由移動
    // moveEle.style.webkitTransform = 'translate3d(' + (curX) + 'px, ' + (curY) + 'px,0px)';
    // 只能移動Y軸方向
    moveEle.style.webkitTransform = 'translate3d(' + 0 + 'px, ' + (curY) + 'px,0px)';


}, false);
moveEle.addEventListener("touchend", function(event) { //touchend
    etx = curX;
    ety = curY;
}, false);

function getT3d(elem, ename) {
    var str1 = elem.style.webkitTransform;
    if (str1 == "") return "0";
    str1 = str1.replace("translate3d(", "");
    str1 = str1.replace(")", "");
    var carr = str1.split(",");

    if (ename == "x") return carr[0];
    else if (ename == "y") return carr[1];
    else if (ename == "z") return carr[2];
    else return "";
}
</script>
</body>
</html>

寫成zepto插件，注意這里是使用zepto1.2版本，fx要自己組裝的。

<!doctype html>
<html>
<head>
    <title>uscroll插件</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

    <!--demo展示所用js end-->
    <style type="text/css">
        body{
            margin: 0;
        }
        
        #main {
            height: 360px;
            overflow: hidden;
        }
        #thelist{
            list-style: none;
            padding: 0;
            margin: 0;
            width: 100%;
            text-align: left;
        }

        #thelist li {
            height:44px;
            line-height:44px;
            color:#333;
            border-bottom: 1px solid #e7e7e7;
            background-color: #fafafa;
            font-size: 16px;
            font-weight:bold;
            padding: 0 10px;
        }
    </style>
</head>
<body>
<div id="main">
    <div id="thelist" >
    </div>
</div>
<div id="gotop"></div>
<script type="text/javascript" src="zepto.min.js"></script>
<script type="text/javascript" src="zepto_fx.js"></script>
<script type="text/javascript">
;
(function($) {
    $.extend($.fn, {
        uscroll: function() {
            var gundongX = 0;
            var gundongY = 0;
            var $this = this;
            var moveEle = this[0];
            var this_height = parseInt($this.css("height"));
            var parent_height = parseInt($this.parent().css("height"));
            var need_height = this_height - parent_height;
            var stx = sty = etx = ety = curX = curY = 0;

            moveEle.addEventListener("touchstart", function(event) { //touchstart
                gundongX = 0;
                gundongY = 0;


                // 元素當前位置
                etx = parseInt(getT3d(moveEle, "x"));
                ety = parseInt(getT3d(moveEle, "y"));

                // 手指位置
                stx = event.touches[0].pageX;
                sty = event.touches[0].pageY;
            }, false);

            moveEle.addEventListener("touchmove", function(event) {
                // 防止拖動頁面
                event.preventDefault();

                // 手指位置 減去 元素當前位置 就是 要移動的距離
                gundongX = event.touches[0].pageX - stx;
                gundongY = event.touches[0].pageY - sty;

                // 目標位置 就是 要移動的距離 加上 元素當前位置
                curX = gundongX + etx;
                curY = gundongY + ety;

                // 自由移動
                // moveEle.style.webkitTransform = 'translate3d(' + (curX) + 'px, ' + (curY) + 'px,0px)';
                // 只能移動Y軸方向      
                moveEle.style.webkitTransform = 'translate3d(' + 0 + 'px, ' + (curY) + 'px,0px)';
                // $this.animate({"translate3d":"0,"+(curY)+"px,0"},300,"ease-out");

            }, false);
            moveEle.addEventListener("touchend", function(event) { //touchend
                if(curY > 0){
                    if($.fn.animate){
                        $this.animate({"translate3d":"0,0,0"},300,"ease-out");
                    }
                    else{
                        moveEle.style.webkitTransform = 'translate3d(' + 0 + 'px, ' + (curY) + 'px,0px)';
                    }
                    
                }
                
                if (curY < -need_height) {
                    if ($.fn.animate) {
                        $this.animate({
                            "translate3d": "0," + (-need_height) + "px,0"
                        }, 300, "ease-out");
                    } else {
                        moveEle.style.webkitTransform = 'translate3d(' + 0 + 'px, ' + (-need_height) + 'px,0px)';
                    }
                }
                etx = curX;
                ety = curY;
            }, false);

            function getT3d(elem, ename) {
                var str1 = elem.style.webkitTransform;
                if (str1 == "") return "0";
                str1 = str1.replace("translate3d(", "");
                str1 = str1.replace(")", "");
                var carr = str1.split(",");

                if (ename == "x") return carr[0];
                else if (ename == "y") return carr[1];
                else if (ename == "z") return carr[2];
                else return "";
            }
        }
    });
})(Zepto);
</script>
<script>
    //填充頁面
    for(var i = 0, html = []; i < 50; i++) {html.push('<li>第 ' + i + ' 行</li>');}
    $('#thelist').html(html.join(''));

    $("#thelist").uscroll();


</script>
</body>
</html>