即使隐藏溢出也显示水平滚动条 [英] horizontal scrollbar showing even when overflow is hidden

查看：75
本文介绍了即使隐藏溢出也显示水平滚动条的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

发生这种情况是因为我有一个居中导航并添加以将同一导航的子 div 设置为视口宽度的 100%.检查了 chrome 中的开发人员工具，该 div 向右移动了一些像素.

无论如何，由于溢出不起作用，我尝试更改 calc() 函数的值以减去这些像素，但水平滚动条仍然存在.

这是我的代码:

<ul class="nav"><li><a href="index.php">home</a></li><li><a href="#">目的地</a><div><div class="nav-column">
<div class="nav-column">

<div class="nav-column">

<div class="nav-column">

<div class="nav-column">

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

和CSS:

body,html {背景颜色:白色；边框:0；大纲:0；边距:0；填充:0；最大宽度:100%；溢出-x:隐藏；}#容器 {显示:块；边距:0 自动；文本对齐:居中；位置:相对；宽度:100%；}.nav {光标:默认；显示:内联块；高度:125px；位置:相对；顶部:50px；宽度:自动；-ms-flex-pack:居中；-ms-display: -ms-flexbox;}.nav,.nav 一个，.nav ul,.nav li,.nav div {边界:无；填充:0；边距:0；大纲:无；}.nav {文字装饰:无；}.nav li {列表样式:无；}.nav >李{显示:块；向左飘浮;}.nav >立>一种 {显示:块；颜色:黑色;字体系列:'Oswald'，无衬线；字体大小:1.2em；字体粗细:500；文本转换:大写；高度:30px；填充:0 20px；位置:相对；z-索引:510；-webkit-transition:所有 .3s 轻松；-moz-transition:所有 .3s 轻松；-o-transition:所有 .3s 的轻松；-ms-transition:所有 .3s 轻松；过渡:所有 .3s 的轻松；}.nav li: 悬停一个 {背景:黑色；白颜色;}.nav >立>div {边框:1px纯黑色；显示:内联块；颜色:黑色;位置:绝对；顶部:30px；左:计算(-50vw + 50%)；宽度:100vw；不透明度:0；溢出:隐藏；可见性:隐藏；背景:白色；z-索引:500；-webkit-transition:所有 .3s 简化 .5s；-moz-transition:所有 .3s 缓解 0.5s；-o-transition:所有 .3s 都简化 0.5s；-ms-transition:所有 .3s 缓解 0.5s；过渡:所有 .3s 缓解 0.5s；}.nav li:hover >div {不透明度:.7；可见性:可见；溢出:隐藏；}.nav .nav 列 {背景颜色:白色；向左飘浮;文本对齐:左；顶部:-30px；填充:2%；位置:相对；宽度:15%；}.nav .nav 列 h3 {颜色:#d1a559；字体系列:Orator Std、IrisUPC、sans-serif；字体粗细:900；边距:20px 0 10px 0；文字装饰:下划线；}.nav .nav 列 li {填充左:0;字体系列:Palatino linotype，Rockwell；}.nav .nav-column li a {背景:白色；颜色:黑色;显示:块；}.nav .nav-column li a:hover {背景:#d1a559；白颜色;-webkit-transition:所有 .1s 轻松；-moz-transition:所有 .1s 轻松；-o-transition:所有 .1s 轻松；-ms-transition:所有 .1s 轻松；过渡:所有 .1s 轻松；}@media(最大宽度:1420px){.缩略图{浮动:无；}}@media(最大宽度:950px){.nav li:hover >div {背景颜色:白色；不透明度:1；}.nav .nav 列 {位置:相对；宽度:20%；}.nav .nav 列 li {列表样式:无；}}@media(最大宽度:700px){.nav li:hover >div {背景颜色:白色；左:0；不透明度:1；宽度:100%；}.nav .nav 列 {浮动:无；}}.col关于{显示:块；浮动:无；}.span_1_of_3 {宽度:70%；}@media(最大宽度:530px){.nav {显示:无；文本对齐:左；高度:150px；顶部:0；填充:0；边距:0；位置:相对；z-索引:999；}.nav li {浮动:无；左:0；}.nav li:hover >div {不透明度:1；顶部:113px；}.nav >立>一种 {边界右:无；显示:块；左:0；}/*div竞争响应按钮*/#菜单 {边框:1px纯黑色；颜色:黑色;光标:指针；显示:块；字体大小:1.3em；左:0；保证金:5%；位置:相对；文本对齐:居中；z-索引:540；宽度:1.4em；}#容器 {左:0；显示:块；填充:0；位置:相对；宽度:100%；}ul{宽度:100%；列表样式:无；}}@media(最小宽度:530px){#菜单 {显示:无；}}

还有一个小提琴示例

解决方案

我已经检查了你的 CSS.为了防止滚动条被显示，你应该注释掉两个 CSS 属性: position: relative;顶部:34px;

.nav {光标:默认；显示:内联块；高度:125px；宽度:自动；-ms-flex-pack:居中；-ms-display: -ms-flexbox;}

I'm running into a problem in my website, where an horizontal scrollbar is always showing even when i add overflow-x: hidden to the body, html elements. Instead of hiding the scrollbar, another scrollbar is added vertically and now i have two vertical scrollbars!

This happened because i have a centered navigation and add to set a child div of that same navigation, to 100% of the viewport width. Checked the developer tools in chrome and that div is going some pixels to the right.

Anyway, since overflow didn't work, i tried to change the values of the calc() function to subtract those pixels but the horizontal scrollbar is still there.

Here is my code:

<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>

And the 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

解决方案

I have checked your CSS. To prevent the scrollbar from being displayed, you should comment out two CSS properties: position: relative; top: 34px;

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

这篇关于即使隐藏溢出也显示水平滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆