JS实现点击导航栏鼠标左右滑动（适用于PC端和移动端）

娜娜啊吖

已于 2022-07-12 14:00:59 修改

阅读量2k

点赞数 4

分类专栏： JS 文章标签： javascript 前端 html

于 2022-06-28 17:44:32 首次发布

本文链接：https://blog.youkuaiyun.com/pqn_cc/article/details/125507096

版权

JS 专栏收录该内容

8 篇文章

订阅专栏

效果

<style>
      .navBar {
        width: 1200px;
        margin-left: 25px;
        margin-top: 40px;
        margin-bottom: 40px;
        overflow-x: auto;
        white-space: nowrap;
      }

      /* 去除底部滚动条 */
      .navBar::-webkit-scrollbar {
        display: none;
      }

      li {
        display: inline-table;
        height: 50px;
        line-height: 50px;
        padding-left: 35px;
        padding-right: 35px;
        margin-right: 12.5px;
        border-radius: 10px;
        background: #eeeeee;
        font-family: " PingFangSC-Regular";
        font-size: 30px;
        color: #333333;
        text-align: center;
        width: 300px;
      }
    </style>

 <body>
    <ul class="navBar" id="nav">
      <li>拖动1</li>
      <li>拖动2</li>
      <li>拖动3</li>
      <li>拖动4</li>
      <li>拖动5</li>
      <li>拖动6</li>
      <li>拖动7</li>
      <li>拖动8</li>
      <li>拖动9</li>
      <li>拖动10</li>
    </ul>
    <script>
      var flag; // 鼠标按下
      var downX; // 鼠标点击的x下标
      var scrollLeft; // 当前元素滚动条的偏移量
      nav.addEventListener("mousedown", function (event) {
        flag = true;
        downX = event.clientX; // 获取到点击的x下标
        scrollLeft = this.scrollLeft; // 获取当前元素滚动条的偏移量
      });
      nav.addEventListener("mousemove", function (event) {
        if (flag) {
          // 判断是否是鼠标按下滚动元素区域
          // 获取移动的x轴
          var moveX = event.clientX;
          // 当前移动的x轴下标减去刚点击下去的x轴下标得到鼠标滑动距离
          var scrollX = moveX - downX;
          // 鼠标按下的滚动条偏移量减去当前鼠标的滑动距离
          this.scrollLeft = scrollLeft - scrollX;
          console.log(scrollX);
        }
      });
      // 鼠标抬起停止拖动
      nav.addEventListener("mouseup", function () {
        flag = false;
      });
      // 鼠标离开元素停止拖动
      nav.addEventListener("mouseleave", function (event) {
        flag = false;
      });
    </script>
  </body>