Question

我在我的网站遇到了一个问题，即使我在body，html元素中添加了overflow-x：hidden，也会显示水平滚动条。不是隐藏滚动条，而是垂直添加另一个滚动条，现在我有两个垂直滚动条！

这是因为我有一个居中的导航并添加以设置相同导航的子div，达到视口宽度的100％。检查了chrome中的开发人员工具，并且div正在向右移动一些像素。

无论如何，由于溢出不起作用，我试图改变calc（）函数的值来减去那些像素，但水平滚动条仍然存在。

这是我的代码：

<div id="container">
        <ul class="nav">
            <li><a href="index.php">home</a></li> 

            <li>
                <a href="#">destinations</a>
                <div>    
                <div class="nav-column">                        

                </div>

                <div class="nav-column">

                </div>

                <div class="nav-column">

                </div> 

                <div class="nav-column">

                </div>

                <div class="nav-column">   

                </div>

                </div>   
            </li>

            <li><a href="#about">about</a></li>
            <li><a href="#contact">contact</a></li>
        </ul>         
</div>

和css：

body,html {
background-color: white;
border: 0;
outline: 0;
margin: 0;
padding: 0;    
max-width: 100%;
overflow-x: hidden;
}
#container {       
display: block;
margin: 0 auto;
text-align: center;
position: relative;
width: 100%;

}

.nav {
cursor: default;
display: inline-block; 
height: 125px;
position: relative;
top: 50px;
width: auto;


-ms-flex-pack: center;
-ms-display: -ms-flexbox;
}

.nav,
.nav a,
.nav ul,
.nav li,
.nav div {
border: none;
padding: 0;
margin: 0;
outline: none;
}

.nav a {
text-decoration: none;
}

.nav li {
list-style: none;
}

.nav > li {

display: block;
float: left;
}

.nav > li > a {

display: block;
color: black;
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
font-weight: 500;
text-transform: uppercase;
height: 30px;
padding: 0 20px;
position: relative;
z-index: 510;

-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition:  all .3s ease;
}

.nav li:hover a {
background: black;
color: white;

} 

.nav > li > div {
border: 1px solid black;
display: inline-block;
color: black;
position: absolute;
top: 30px;
left: calc(-50vw + 50%);
width: 100vw;
opacity: 0;
overflow: hidden;
visibility: hidden;

background: white;
z-index: 500;

-webkit-transition: all .3s ease .5s;
-moz-transition: all .3s ease .5s;
-o-transition: all .3s ease .5s;
-ms-transition: all .3s ease .5s;
transition: all .3s ease .5s;
}

.nav li:hover > div {
opacity: .7;
visibility: visible ;
overflow: hidden;
}

.nav .nav-column {
background-color: white;
float: left;
text-align: left;
top: -30px;
padding: 2%;
position: relative;
width: 15%;
}

.nav .nav-column h3 {
color: #d1a559;
font-family: Orator Std, IrisUPC, sans-serif;
font-weight: 900;
margin: 20px 0 10px 0;
text-decoration: underline ;
}

.nav .nav-column li {
padding-left: 0;    
font-family: Palatino linotype, Rockwell;
}

.nav .nav-column li a {
background: white;
color: black;
display: block;

}

.nav .nav-column li a:hover {
background: #d1a559;
color: white;

-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-o-transition: all .1s ease;
-ms-transition: all .1s ease;
transition:  all .1s ease;
}

@media (max-width:1420px) {


.Thumbnails {
    float: none;
}
}

@media (max-width: 950px) {
.nav li:hover > div {
background-color: white;
opacity: 1;
}

.nav .nav-column {
position: relative;
width: 20%;
}

.nav .nav-column li {
list-style: none;
}
}

@media (max-width: 700px) {
.nav li:hover > div {
background-color: white;
left: 0;
opacity: 1;
width: 100%;
}

.nav .nav-column {
float: none;
}     
}

  .colAbout {
  display: block;
  float: none;
  }

 .span_1_of_3 {
  width: 70%;
  }

@media (max-width: 530px) {
.nav {
    display: none;
    text-align: left;
    height: 150px;
    top: 0;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 999;
}    

.nav li {
float: none;
left: 0;
}

.nav li:hover > div {
opacity: 1;
top: 113px;
}    

.nav > li > a {
border-right: none;
display: block;
left: 0;    
}    

 /*Div contendo responsive button*/     
#menu {
border: 1px solid black;
color: black;
cursor: pointer;
display: block;
font-size: 1.3em;
left: 0;
margin: 5%;
position: relative;
text-align: center;
z-index: 540;
width: 1.4em;
}

#container {
left: 0;
display: block;    
padding: 0;
position: relative;
width: 100%;
}

ul {
width: 100%;
list-style: none;
}
}

@media (min-width: 530px) {
#menu {
display: none;
}    
}

And a fiddle example

Answer 1

我检查了你的CSS文件。原因显示滚动，你应该注释2个属性css：position：relative; top：34px;

.nav {
cursor: default;
display: inline-block;
height: 125px;   
width: auto;
-ms-flex-pack: center;
-ms-display: -ms-flexbox;

}

Answer 2

如果您只想隐藏滚动条：

#container {
  overflow: hidden!important;
}

Answer 3

我遇到了同样的问题。我仍然不知道根本原因，但是将溢出设置为“ -moz-hidden-unscrollable”似乎会隐藏滚动条。

.container {
    overflow: -moz-hidden-unscrollable
}

即使隐藏溢出，也会显示水平滚动条

3 个答案: