横向鼠标拖动引发滚动条横向滚动 

为了方便引入了jquery：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{width:600px;margin: 0 auto;overflow-x: auto;background: #00a7d0;}
        #child{width: 1000px;height: 500px;background: #0bb20c;}
    </style>
</head>
<body>
<div id="box">
    <div id="child">134567892</div>
</div>
</body>
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    setTimeout(() => {
    $("#child").on("mousedown", function (e) {
      let sx = e.offsetX; //记录鼠标落入指示区域时的坐标
      let lx = $("#box").scrollLeft(); //记录鼠标落入指示区域时滚动条已滚动的距离
      let timer; //给个延迟器是为了防止高频触发一直抖
      $("body").on("mousemove", function (e1) {
        //给body加此事件是为了解决一些异常
        if (e1.target.id == "child") {
          //判断移动区域是否为child
          let ex = e1.offsetX; //记录移动时鼠标的横坐标
          let x = ex - sx; //移动时的坐标减去落入时的坐标
          if (x < 0) {
            //如果小于0，说明鼠标是在往左边拖动
            timer = setTimeout(function () {
              //这一步是因为鼠标往左拖动，实际坐标轴会往右移动，也就是滚动条滚动距离变大，取落入时的滚动距离加差值的绝对值
              $("#box").scrollLeft(lx + Math.abs(x));
            }, 0);
          }
          if (x >= 0) {
            //这一步就是上一判断的反结果
            timer = setTimeout(function () {
              $("#box").scrollLeft(lx - x);
            }, 0);
          }
        } else {
          //这一步是判断移动区域不为child，那么触发body的mouseup事件
          $("body").trigger("mouseup");
        }
      }); //mouseup事件，关闭当前mousemove事件，并将定时置空
      $("body").on("mouseup", function (e) {
        $("body").off("mousemove");
        timer = null;
      });
    });
  }, 0);
</script>
</html>


 


 






            

            
posted @ 
2019-06-03 17:56 
你风致 
阅读(2876) 
评论(0) 
 
收藏 
举报