横向滚动条，鼠标按下左右滚动！ 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<meta content="text/html; charset=utf-8" />

<style type="text/css">

  #a{

      margin: auto;

        height:380px;

        width:700px;

        background-color: green;

        overflow-x: hidden;

        overflow-y: hidden;

    }

    #b{

        height:800px;

        width:2000px;

    }

 
    #b li{
        width: 200px;
        height: 200px;
        background-color: red;
        float: left;
        list-style: none;
        margin-left: 30px;

    }
</style>

</head>

<body id="c">

  <div>

    <div id="a" class="projList">

      <div id="b">

       <ul>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
       </ul>

        </div>

    </div>

 

  </div>

  <script>

    window.onload = function () {
      var body = document;
        var dv = document.getElementById('a');//大盒子
        //上一次的位置 scrollLeft
        var last_left = 0;
        dv.onmousedown = function (e) {
            dv.onmousemove = mousemove; //鼠标移动
            body.onmouseup = mouseup;   //鼠标按出
             e = e || window.event;
            //如果上次有记录
            console.log(last_left)
            if(last_left > 0 ){
                //就减掉上次的距离
                ox = last_left + e.clientX;
            }else{
                // ox = dv.scrollLeft - e.clientX;
                ox = e.clientX;
            }
        };
        function mousemove(e) { //鼠标移动
            e = e || window.event;
            console.log(dv.scrollWidth,dv.scrollLeft,dv.clientWidth)

            if(dv.scrollWidth-dv.scrollLeft!==dv.clientWidth){

              last_left = ox- e.clientX  ;

            }

            dv.scrollLeft = ox - e.clientX ;

        }

        function mouseup(e) {

            // dv.className = '';

            dv.onmouseup = dv.onmousemove = null;

        }

    }()

</script>

</body>

</html>

　　

posted @ 2020-05-14 15:27  胡炖鱼  阅读(1079)  评论(0)  编辑  收藏  举报