首页 > 代码库 > 移动端网页自定义滚动条

移动端网页自定义滚动条

2024-11-11 00:16:41   206人阅读

<!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>
//来自：http://www.cnblogs.com/samwu/p/3508548.html

 

移动端网页自定义滚动条


联系
我们