javascript - 没有滚动条的 CSS 可拖动导航

Question

编辑:我在下面包含了一个 js fiddle 链接

我正在尝试为一个网站创建一个导航栏，如果您使用小屏幕访问它，导航栏是不可折叠的，但它是绝对的，您只需要捕获它并左右滑动而无需滑动整个页面，但 div 仅用于导航栏。它正在水平创建一个滚动条，它不应该像我想要的那样。

$(document).ready(function() {

});

$(function() {
  var curDown = false,
    curYPos = 0,
    curXPos = 0;
  $(window).mousemove(function(m) {
    if (curDown === true) {
      $(window).scrollTop($(window).scrollTop() + (curYPos - m.pageY));
      $(window).scrollLeft($(window).scrollLeft() + (curXPos - m.pageX));
    }
  });

  $(window).mousedown(function(m) {
    curDown = true;
    curYPos = m.pageY;
    curXPos = m.pageX;
  });

  $(window).mouseup(function() {
    curDown = false;
  });
})

body {
  margin: 0;
  /*overflow-x: hidden;*/
}

header {
  background-color: #F8F8F8;
}

#strip {
  height: 60px;
  padding-top: 17px;
  width: 100%;
}

#company_name {
  font-family: Roboto;
  font-weight: 700;
  padding-left: 12px;
}

.nav {
  margin-right: 100px;
  padding-top: 20px;
  background-color: white;
  width: 100%;
  cursor: -webkit-grab;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  outline: none;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  position: absolute;
}

.nav ul {
  display: table;
  table-layout: fixed;
}

.nav ul>li {
  display: table-cell;
  font-family: Segoe UI;
  font-weight: 700;
  text-decoration: underline;
  color: #99999F;
}

.nav ul>li>a {
  display: block;
  margin-right: 15px;
  font-family: Segoe UI;
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  color: #99999F;
}

.nav ul>.active {
  display: block;
  font-family: Segoe UI;
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: #99999F;
  color: #00A97E;
}

.nav ul>.active>a {
  display: block;
  font-family: Segoe UI;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: #99999F;
  color: #00A97E;
}

.padded-underline {
  display: inline-block;
  border-bottom: 1px solid black;
  padding-bottom: 2px;
}

#user_nav {
  font-family: Segoe UI;
  font-weight: normal;
  font-size: 12px;
  margin-top: 2px;
  margin-right: 150px;
  float: right;
}

#user_nav>ul {
  list-style-type: none;
}

#user_nav>ul>li {
  display: inline-block;
  margin-right: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<header>
  <div id="strip">
    <img src="images/user-icon.png" style="width: 30px; margin-left: 20px"><span id="company_name">MDA Media Development APAC</span>
    <div id="user_nav">
      <ul>
        <li>Admin x44 | Profile</li>
        <li>Sample Link</li>
        <li>Logout</li>
      </ul>
    </div>
  </div>
  <div class="nav">
    <button class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
      </button>
    <div id="myNavbar">
      <ul>
        <li class="active"><a href="#">DASHBOARD</a></li>
        <li><a href="#">ACCOUNTS</a></li>
        <li><a href="#">ACCOUNTS</a></li>
        <li><a href="#">ACCOUNTS</a></li>
        <li><a href="#">ACCOUNTS</a></li>
        <li><a href="#">ACCOUNTS</a></li>
        <hr style="margin-top: -4px; margin-right: 50px" />
      </ul>
    </div>
  </div>
</header>
<!-- <input type="text"> -->

我不习惯开发前端，这就是我在这里遇到麻烦的原因。但我别无选择，即使我不是设计师，我仍然想让网站看起来很现代。

非常感谢!

抓取我正在使用的div的引用: https://codepen.io/JTParrett/pen/uzGvy

编辑:

JS fiddle 链接: https://jsfiddle.net/6878pnLn/

Answer 1

overflow-x: hidden 如果我正确理解你的问题，导航栏包装器应该可以解决问题。