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

时间：2017-09-18 08:04:10

标签： javascript html css

编辑：我在下面添加了一个js小提琴链接

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

＆＃13;
＆＃13; 
$(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;
  });
})
＆＃13; 
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;
}
＆＃13; 
<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"> -->
＆＃13;
＆＃13;
＆＃13;

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

非常感谢！

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

编辑：

JS小提琴链接： https://jsfiddle.net/6878pnLn/

2 个答案:

答案 0 :(得分：1)

如果我正确理解你的问题，导航栏包装器上的

overflow-x: hidden应该可以解决问题。

答案 1 :(得分：0)

我指定了我在互联网上找到的javascript只指向我想要修改的DIV。对不起，如果我没有尝试先了解javascript，然后我隐藏了导航栏滚动条，回答@Christer Olsen。希望这能够帮助任何人！

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/styles.js">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<style>

    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;
        overflow: scroll;
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .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;
    }

</style>
<body>
    <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"> -->
</body>
</html>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>

    $(document).ready(function() {

    });

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

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

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

</script>
相关问题
最新问题