鼠标拖拽滑动导航栏

<div id="leng">
      <!-- <div id="psns" > -->
      <header>
        <strong onclick="sqbs()" class="nav">全部订单</strong>
      <p onclick="wfkn()" class="nav">未付款</p>
      <p onclick="yfk()" class="nav">已付款</p>
      <p onclick="yfsh()" class="nav">已发货</p>
      <p onclick="ydsy()" class="nav">已收货</p>
      <p  class="nav">已评价</p>
      <p class="nav">退款中</p>
      <p class="nav">已退款</p>
      <p onclick="qsxs()" class="nav">已取消</p>
      </header>
      <!-- </div> -->
    </div>

header {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  overflow-x: scroll;
}
header::-webkit-scrollbar {
  display: none;
}
.nav {
  display: inline-block;
  margin-left: 15px;
  margin-right: 10px;
  height: 50px;
  line-height: 50px;
}

$(function() {
            $(".nav").on("click", function(ev) {
              var moveX = $(this).position().left + $(this).parent().scrollLeft();
              var pageX = document.documentElement.clientWidth;
              var blockWidth = $(this).width();
              console.log(moveX)
              console.log(pageX);
              console.log(blockWidth);
              var left = moveX - (pageX / 2) + (blockWidth / 2);
              console.log(left);
              $(this).css("color", "white").siblings().css("color", "#808970");
              $("header").scrollLeft(left);
            });
          });