實現超出的內容可以左右捲動

因專案需要，實現超出的內容可以左右捲動。未限制實現方法，在查閱資料的情況下找到兩種方法可以滿足。

方法一：使用滑鼠拖動內容進行卷動

具體實現：
通過mousedown、mousemove、mouseup結合，改變定位的left屬性實現。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <style>
        body{
            position: relative;
            margin:0;
            padding:0;
            width:100%;
            height: 1000px;
        }
        #box{
            height: 50px;
            width:200px;
            position: absolute;
            left:50%;
            top:50%;
            margin-left:-200px;
            margin-top:-200px;
            background: #CDCDCD;
        }
        #small-box{
            height: 50px;
            width:50px;
            position: absolute;
            left:0;
            top:0;
            background: #FF66CC;
            cursor:move ;
            opacity: 0.7;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="small-box"></div>
    </div>
<script>
    var box=$("#small-box");
    var body=$('body');
    var index=0;
    var x1;
    box.mousedown(function(){
        index=1;              //滑鼠按下才能觸發onmousemove方法
        var x=event.clientX;     //滑鼠點選的座標值，x
        var left= this.style.left;
        left=left.substr(0,left.length-2);   //去掉px
        x1=parseInt(x-left);
    });
    box.mousemove(function(){
        if(index===1){
            this.style.left=event.clientX-x1+'px';
            if(this.style.left.substr(0,this.style.left.length-2)<0){
                this.style.left=0;
            };
            if(this.style.left.substr(0,this.style.left.length-2)>150){
                this.style.left='150px';
            };
        }
    });
    box.mouseup(function(){
        index=0;
    });
    body.mouseup(function(){
        index=0;
    });
</script>
</body>
</html>

結果：未實現。當前範例中沒有使用定位

方法二：使用滑鼠滾輪代替卷軸捲動

具體實現：
通過mousewheel事件，改變scrollLeft卷軸到最左邊的距離

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body,html{
            position: relative;
            margin:0;
            padding:0;
            width:100%;
            height: 100%;
        }
        #box{
            height: 50px;
            width:300px;
            position: absolute;
            left:50%;
            top:50%;
            transform: translate(-50%);
            background: #CDCDCD;
            overflow: hidden;
        }
        #small-box{
          white-space: nowrap;
        }
    </style>
</head>
<body>
  <div id="box">
    <div id="small-box">內容溢位1內容溢位2內容溢位3內容溢位4內容溢位5內容溢位6內容溢位7內容溢位8內容溢位9內容溢位10內容溢位11</div>
  </div>
  <script>
    let box = document.querySelector("#box")
    // 由於不同的瀏覽器所相容的函數不同，所以需要首先判斷瀏覽器型別，再按照不同瀏覽器寫不同的函數
    let explorer =navigator.userAgent;
    let isIE = navigator.userAgent.match(/MSIE (\d)/i);
    isIE = isIE ? isIE[1] : undefined;
    if (isIE < 9) {
      //傳統瀏覽器使用MouseWheel事件
      container.attachEvent("onmousewheel", function (e) {
          //計算滑鼠滾輪捲動的距離
          //一格3行，每行40畫素
          let v = e.wheelDelta / 2;
          container.scrollLeft += v;
          //阻止瀏覽器預設方法
          return false;
      })
    }
    if(explorer.indexOf("Firefox") >= 0){
      box.addEventListener("DOMMouseScroll",function(){
        //計算滑鼠滾輪捲動的距離
        box.scrollLeft += event.detail * 40;
        //阻止瀏覽器預設方法
        event.preventDefault();
      }, false)
    }else{
      box.addEventListener("mousewheel",function(){
        //計算滑鼠滾輪捲動的距離
        let v = -event.wheelDelta / 2;
        box.scrollLeft += v;
        //阻止瀏覽器預設方法
        event.preventDefault();
      }, false)
    }
  </script>
</body>
</html>

結果：實現

實現超出的內容可以左右捲動

方法一： 使用滑鼠拖動內容進行卷動

方法二：使用滑鼠滾輪代替卷軸捲動

方法一：使用滑鼠拖動內容進行卷動