admin管理员组

文章数量:1410731

Explanation

I have this Bootstrap's navigation bar that has a horizontal responsive menu, but it is showing a horizontal scrollbar. I've listed below some attempts to hide/remove (and still scroll) this scrollbar, but nothing works properly.

Attempt 1: Use overflow-x: hidden, but then it won't scroll horizontally.
Attempt 2: Use ::-webkit-scrollbar {display: none;}, but it only works on webkit's based browsers.
Attempt 3: As suggested in this answer, I tried to use this code below, but then the submenu's (when navigation is expanded) size was changed and the scrollbar was still in there. You can see it in this fiddle.

#parent{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser patibility */
}

/*I changed overflow-y to overflow-x and padding-right to padding-bottom*/

Is there any way that works on most browsers?

Sample code

You can also see on JSFiddle.

#navigation {
    background-color: rgba(230, 104, 92, 1);
}

.navbar-toggle i, .navbar-brand, .navbar-nav li a {
    color: #fff;
}

.nav {
    white-space: nowrap;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="stylesheet" href=".3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href=".7.0/css/font-awesome.css">
</head>

<body id="body">

    <header id="navigation" class="navbar navbar-fixed-top">
        <div class="container">

            <div class="navbar-header">

                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <i class="fa fa-bars fa-2x" aria-hidden="true"></i>
                </button>

                <a class="navbar-brand" href="#body">
                    Logo
                </a>

            </div>

            <nav class="collapse navbar-collapse navbar-right" role="navigation">
                <ul id="nav-js" class="nav navbar-nav">
                    <li><a href="#">Item1</a></li>
                    <li><a href="#">Item2</a></li>
                    <li><a href="#">Item3</a></li>
                    <li><a href="#">Item4</a></li>
                    <li><a href="#">Item5</a></li>
                    <li><a href="#">Item6</a></li>
                    <li><a href="#">Item7</a></li>
                    <li><a href="#">Item8</a></li>
                    <li><a href="#">Item9</a></li>
                    <li><a href="#">Item10</a></li>
                    <li><a href="#">Item11</a></li>
                    <li><a href="#">Item12</a></li>
                    <li><a href="#">Item13</a></li>
                    <li><a href="#">Item14</a></li>
                    <li><a href="#">Item15</a></li>
                </ul>
            </nav>

        </div>
    </header>

    <script src=".1.1.js"></script>
    <script src=".3.7/js/bootstrap.min.js"></script>
    
</body>

</html>

Explanation

I have this Bootstrap's navigation bar that has a horizontal responsive menu, but it is showing a horizontal scrollbar. I've listed below some attempts to hide/remove (and still scroll) this scrollbar, but nothing works properly.

Attempt 1: Use overflow-x: hidden, but then it won't scroll horizontally.
Attempt 2: Use ::-webkit-scrollbar {display: none;}, but it only works on webkit's based browsers.
Attempt 3: As suggested in this answer, I tried to use this code below, but then the submenu's (when navigation is expanded) size was changed and the scrollbar was still in there. You can see it in this fiddle.

#parent{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser patibility */
}

/*I changed overflow-y to overflow-x and padding-right to padding-bottom*/

Is there any way that works on most browsers?

Sample code

You can also see on JSFiddle.

#navigation {
    background-color: rgba(230, 104, 92, 1);
}

.navbar-toggle i, .navbar-brand, .navbar-nav li a {
    color: #fff;
}

.nav {
    white-space: nowrap;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>

<body id="body">

    <header id="navigation" class="navbar navbar-fixed-top">
        <div class="container">

            <div class="navbar-header">

                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <i class="fa fa-bars fa-2x" aria-hidden="true"></i>
                </button>

                <a class="navbar-brand" href="#body">
                    Logo
                </a>

            </div>

            <nav class="collapse navbar-collapse navbar-right" role="navigation">
                <ul id="nav-js" class="nav navbar-nav">
                    <li><a href="#">Item1</a></li>
                    <li><a href="#">Item2</a></li>
                    <li><a href="#">Item3</a></li>
                    <li><a href="#">Item4</a></li>
                    <li><a href="#">Item5</a></li>
                    <li><a href="#">Item6</a></li>
                    <li><a href="#">Item7</a></li>
                    <li><a href="#">Item8</a></li>
                    <li><a href="#">Item9</a></li>
                    <li><a href="#">Item10</a></li>
                    <li><a href="#">Item11</a></li>
                    <li><a href="#">Item12</a></li>
                    <li><a href="#">Item13</a></li>
                    <li><a href="#">Item14</a></li>
                    <li><a href="#">Item15</a></li>
                </ul>
            </nav>

        </div>
    </header>

    <script src="https://code.jquery./jquery-3.1.1.js"></script>
    <script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
</body>

</html>

Thanks in advance,
Luiz.

  • javascript
  • jquery
  • html
  • css
  • twitter-bootstrap
Share Improve this question edited May 23, 2017 at 12:32 CommunityBot 11 silver badge asked Mar 5, 2017 at 15:40 LuizLuiz 1,3154 gold badges19 silver badges35 bronze badges 2
  • How do you want to arrange the items then, if you don't want a horizontal scrollbar? – andreas Commented Mar 5, 2017 at 16:02
  • the scrollbar should still work, but not appear. I'm trying to do something like medium.. – Luiz Commented Mar 5, 2017 at 16:05
Add a ment  | 

2 Answers 2

Reset to default 2

The best way you can solve this problem it to change your menu structure. You're always going to have some sort of overflow problem because of the nature of the dom tree and the number of menu items you have. The best way to approach this would be to think what content your menu items are going to have then nest them. An example being:

<ul>
<li>Main A</li>
<li>Main B
  <ul>
    <li>Sub 1 of Main B</li>
    <li>Sub 2 of Main B</li>
  </ul>
</li>
</ul>

Having the overflow property hiding items that are intrinsic to the site's usability and navigation is going to be a huge headache in the long-term. Also you'll always have the scroll bar because you're breaking the width value of the containing element, and making it wider that the highest level parent element, which means there is no other way to view the items.

You can achieve it in the following way-- used media queries to have the effect only in small screen view.

As we are giving position:relative to the parent and position:absolute to child we need to hard code the height of the parent. that's why the height changed.

#parent {
  width: 100%;
  height: 70px;
}

Also give some padding left to mid align it, like this--

padding right is necessary to be ale to scroll.

#child {

  padding-right: 150px;
  padding-left: 25px;
}

working example

#navigation {
    background-color: rgba(230, 104, 92, 1);
}

.navbar-toggle i, .navbar-brand, .navbar-nav li a {
    color: #fff;
}

.nav {
    white-space: nowrap;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}
@media screen and (max-width: 768px) {
#child,
#parent {
  width: 120%;
  height: 70px;
}
#parent {
  
  position: relative;
  overflow: hidden;
}
#child {
  position: absolute;
  left: 0;
  overflow-y: hidden;
  overflow-x: scroll;
  padding-right: 150px;
  padding-left: 25px;
}
#child::-webkit-scrollbar {
  display: none;
}
.navbar-nav > li {
      margin-left: 10px;
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>

<body id="body">

    <header id="navigation" class="navbar navbar-fixed-top">
        <div class="container">

            <div class="navbar-header">

                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <i class="fa fa-bars fa-2x" aria-hidden="true"></i>
                </button>

                <a class="navbar-brand" href="#body">
                    Logo
                </a>

            </div>

            <nav id="parent" class="collapse navbar-collapse navbar-right" role="navigation">
                <ul id="child" class="nav navbar-nav">
                    <li><a href="#">Item1</a></li>
                    <li><a href="#">Item2</a></li>
                    <li><a href="#">Item3</a></li>
                    <li><a href="#">Item4</a></li>
                    <li><a href="#">Item5</a></li>
                    <li><a href="#">Item6</a></li>
                    <li><a href="#">Item7</a></li>
                    <li><a href="#">Item8</a></li>
                    <li><a href="#">Item9</a></li>
                    <li><a href="#">Item10</a></li>
                    <li><a href="#">Item11</a></li>
                    <li><a href="#">Item12</a></li>
                    <li><a href="#">Item13</a></li>
                    <li><a href="#">Item14</a></li>
                    <li><a href="#">Item15</a></li>
                </ul>
            </nav>

        </div>
    </header>

    <script src="https://code.jquery./jquery-3.1.1.js"></script>
    <script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
</body>

</html>

If it looks like breaking use in firefox write browser specific css..increase the margin between nav-items.

<style type="text/css">
 @-moz-document url-prefix() {
 .navbar-nav > li {
  margin-left: 10px;/*set this to such a value so that it doesn't look like 
   it is breaking*/
  }
   }
    </style>

Hope this helps!

本文标签： javascriptHide navigation39s bar scrollbar and still scrollStack Overflow

版权声明：本文标题：javascript - Hide navigation&#39;s bar scrollbar and still scroll - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744955402a2634325.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。