堆栈内存溢出
  简体   繁体   English

如何去除水平滚动条

[英]How to remove Horizontal scroll bar

 原文  2021-10-07 01:23:54  5   1    javascript/ html/ css/ sass/ overflow

问题描述

i get this horizonatal scroll bar when i add my content to my "section3__container" container even if they are small in size.当我将我的内容添加到我的“section3__container”容器时，即使它们很小，我也会得到这个水平滚动条。 I have tried alot of things like overFlow hidden overflow-x hidden reducing size of content but the horizontal bar keeps appearing.我已经尝试了很多东西，比如 overFlow hidden overflow-x hidden reducing size of content 但水平条一直出现。 i need help to remove this horizontal scroll bar.我需要帮助来删除这个水平滚动条。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
    <link rel="stylesheet" href="/static/styles/style.css" type="text/css">
    <link rel='icon' href='/static/images/logo.jpeg' type='image/x-icon'/>
    
</head>
<body>
    <div id="container">
        <div id="container__section1">
            <nav id="container__section1__destopNav">
                <a href="" id="logo">chinaza</a>
                <ul>
                    <li class="navItem" ><a href=""><span id="active"></span> Home</a></li>
                    <li class="navItem"><a href=""><span></span>About</a></li>
                    <li class="navItem"><a href=""><span></span>skill</a></li>
                    <li class="navItem"><a href=""><span></span>Service</a></li>
                    <li class="navItem"><a href=""><span></span>Project</a></li>
                    <li class="navItem"><a href=""><span></span>Contact</a></li>
                    <li class="navItem"><a href=""><i class="fa fa-moon-o" aria-hidden="true"></i>
                    </a></li>
                </ul>
            </nav>
            <nav id="container__section1__mobilepNav">
                <ul id="container__section1__mobilepNav__container">
                    <li id="container__section1__mobilepNav__container__1"><a href="" id="logo2">chinaza</a></li>
                    <li id="container__section1__mobilepNav__container__2">
                        <ul id="container__section1__mobilepNav__container__2_1">
                            <li id="theme">
                                <i class="fa fa-moon-o" aria-hidden="true"></i>
                             </li>
                            <li id="menu">
                                <i class="fa fa-bars" aria-hidden="true"></i>
                            </li>
                            <ul id="menu_content">
                                <li class="navItem"><a href=""><span></span> Home</a></li>
                                <li class="navItem"><a href=""><span></span>About</a></li>
                                <li class="navItem"><a href=""><span></span>skill</a></li>
                                <li class="navItem"><a href=""><span></span>Service</a></li>
                                <li class="navItem"><a href=""><span></span>Project</a></li>
                                <li class="navItem"><a href=""><span></span>Contact</a></li>
                            </ul>   
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>
      <div id="section2" >
        <ul id="section2__container">
            <li id="section2__container__text" class="section2__container__class"> 
                <ul id="section2__container__text__container">
                    <li>
                        <ul id="section2__container__text__container__textContainer__socialMedia">
                            <li><a href=""><i class="fa fa-github" aria-hidden="true"></i></a></li>
                            <li><a href=""><i class="fa fa-linkedin-square" aria-hidden="true"></i></a></li>
                            <li><a href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a></li>
                        </ul>
                    </li>
                    <li id="section2__container__text__container__textContainer"> 
                        <h1>Hi, Am Chinaza</h1>
                        <h4>Frontend developer </h4>
                        <p> high level experience in web 
                            design and development knowledge,
                            producing quality work
                        </p>
                        <div id="section2__container__text__container__textContainer__container"><a href="">Contact me</a></div>
                    </li>
                </ul>
            </li>
            
            <li id="section2__containerImage"  class="section2__container__class">
                <div id="section2__containerImage__container1" class="section2__containerImage__containers">
                    <div id="section2__containerImage__container2" class="section2__containerImage__containers">
                        <img src="static/images/about3.svg " alt="">
                    </div>
                </div>
            </li>
        </ul>
      </div>
      <div id="section3">
            <h1 id="section3__about">About me</h1>
            <h4 id="section3_introduction">My introduction</h4>

            <ul id="section3__container">
                <li id="section3__container__1" class="section3__container__items">
                    <img src="static/images/undraw_Developer_activity_re_39tg.svg" alt="">
                </li>
                <li id="section3__container__2" class="section3__container__items">
                    <p>web developer, with extensive knowledge
                        and years of experience, working in web 
                        technology  and UI/Ux design, delivering quality 
                        work.
                    </p>
                    <ul id="section3__container__2__container">
                        <li>
                            <h1>3 +</h1>
                            <p>Years experinece</p>
                        </li>
                        <li>
                            <h1>3</h1>
                            <p>Completed project</p>
                        </li>
                        <li>
                            <h1>1</h1>
                            <p>Companies worked</p>
                        </li>
                    </ul>
                    <div id="section3__container__2__download">
                        <a href=""> Download <i class="fa fa-arrow-circle-down" aria-hidden="true"></i></a>
                    </div>
                </li>
            </ul>
      </div>
    </div>
    <script src="/static/home.js"></script>
</body>
</html>


$navFontSize: 18px;
$navcolor:black;
$maincolour: rgb(54, 54, 168);
$fadeAsh:rgb(114, 112, 112);
$minwidth:290px;
$h1FontSize:40px;
$h4FontSize:20px;
$h1FontSizeMobile:30px;
$h4FontSizeMobile:20px;
$paragraph:23px;

@mixin button {
    width: 170px;
    height: 45px;
    text-align: center;
    line-height: 45px;
    margin-top: 40px;
    a{
        text-decoration: none;
        display: inline-block;
        width: 100%;
        height: 100%;
        font-size: 20px;
        border: 2px solid $maincolour;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        background-color: rgb(236, 232, 247);
        transition:  background-color 1s;
    }
    &:hover a{
        background-color: $maincolour;
        color: white;
        border: none;
    }    
}
*{
    margin: 0;
    padding: 0;
}
#container{
    width: 100vw;
    height: 100vh;
}

#container__section1{
    width: 100%;
    height: 80px;
    z-index: 2000;
    #container__section1__destopNav{
        width:100%;
        height: 100px;  
        position: fixed;
        z-index: 200;
        #logo{
            text-decoration: none;
            padding: 30px;
            line-height: 30px;
            color: $navcolor;
            font-size:25px;
        }
        ul{
            display: flex;
            flex-direction: row;
            text-align: center;
            margin: 0 auto;
            width: 600px;
            list-style: none;
            justify-content: space-evenly;
            li{
                position: relative;
                padding: 9px;
                span{
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    height: 0px;
                    width: 0;
                    transition: width 2s height 4s;
                    background-color: rgb(54, 54, 168);
                    border-top-left-radius: 12px;
                    border-top-right-radius: 12px;
                }
                #active{
                    height: 3px;
                    width: 100%;
                    background-color: $maincolour;
                }
                a{
                    text-decoration: none;
                    font-size: $navFontSize;
                    color: $navcolor;
                    width: 100%;
                    padding: 5px;
                }
            }
            li:hover span{
                height: 3px;
                width: 100%;
                background-color: rgb(81, 100, 209);
            }
        }  
    }
}
#section2{
    width: 100%;
    height: auto;
    z-index: -1;
    margin-top: 70px;
    min-width: $minwidth;
    #section2__container{
        width: 85%;
        display: flex;
        flex-wrap: wrap-reverse;
        list-style: none;
        margin: 0;
        padding: 0;
        margin: 0 auto;
        justify-content: space-evenly;
        height: 100%;
        .section2__container__class{
            list-style: none;
            height: 400px;
            .section2__containerImage__containers{
                margin-top: 40px;
                width: 270px;
                height: 270px;  
            }
            #section2__containerImage__container1{
               position: relative;
               transform: translateY(4px) rotateZ(-5deg);
               background-color: #3636a8;
               margin: 0 auto;
            }
            #section2__containerImage__container2{
                position: absolute;
                bottom: 0;
                transform: translateY(4px) rotateZ(5deg);
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
  
        #section2__container__text #section2__container__text__container{
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-between;
            margin: 0;
            padding: 0;
            list-style: none;
            height: 100%;
            #section2__container__text__container__textContainer__socialMedia{
                flex: 1;
                width: 100px;
                height: 200px;
                list-style: none;
                vertical-align : middle;
                margin-top: 90px;
                padding: 0;
                padding-right: 30px;
                li{
                    padding-top: 25px;
                    font-size: 20px;
                    color:rgb(54, 54, 168);
                }
            }

            #section2__container__text__container__textContainer{
                flex: 2;
                h1{
                    font-size: $h1FontSize;
                    margin-top: 20px;
                }
                h4{
                    color: $fadeAsh;
                    font-size: 23px;
                    margin-top: 15px;
                }
                p{
                    color: $fadeAsh;
                    margin-top: 15px;
                    width: 330px;
                    font-size: 20px;
                }
                #section2__container__text__container__textContainer__container{
                   @include button()
                }
            }
        }
    }

}

#section3{
    width: 100%;
    overflow-x: hidden;
    #section3__about{
        overflow-x: hidden;
        text-align: center;
        font-size: $h1FontSize;
      
    }
    #section3_introduction{
        text-align: center;
        color:$fadeAsh;
        font-size: $h4FontSize;
        margin-top: 25px;
    }
    #section3__container{
        display: flex;
        flex-wrap: wrap;
        width: 80%;
        margin:  0 auto;
        height: fit-content;
        list-style: none;
        margin-top: 60px;
        #section3__container__1{
            text-align: center;
            
            img{ 
                width: 314px;
                height: 314px;
            }
        }
        .section3__container__items{
            flex: 1;
        }
        #section3__container__2 {
            p{
                width: 70%;
                color: $fadeAsh;
                font-size: $paragraph;
                
            }
            #section3__container__2__container{
                list-style: none;
                display: flex;
                flex-wrap: nowrap;
                margin-top: 30px;
                width: 85%;
                li{
                    text-align: center;
                    width: 100%;
                }
                li h1{
                    text-align: center;
                  
                }
                
            }
            #section3__container__2__download{
                @include button()
            }
        }
    }

}



#container__section1__mobilepNav{
    display: none;
}
@media(max-width:1024px){
    #container{
        height: 100%;
    }
    #container__section1__destopNav{
        display: none;
    }
    #container__section1__mobilepNav{
        display:inline-block;
        position: fixed;
        bottom: 0;
        left: 0; 
        width: 100%;
        height: 65px;
        box-shadow:0px 4px 20px rgb(189, 188, 188);
        z-index: 1;
        #container__section1__mobilepNav__container{
            height: 60px;
            box-shadow:0px 4px 20px rgb(189, 188, 188);
            list-style: none;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-between;
            padding-top: 20px;
            background-color: white;
            li{
                width: 100px;
            }
            li #logo2{
                text-decoration: none;
                font-size:20px;
                padding-left: 20px;
            }
            #container__section1__mobilepNav__container__1{
                text-align: left;
            }
            #container__section1__mobilepNav__container__2{
                #container__section1__mobilepNav__container__2_1{
                    display: flex;
                    list-style: none;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    justify-content: space-around;
                    width: 100px;
                    #menu_content{
                        position: absolute;
                        display: flex;
                        justify-content: space-evenly;
                        flex-wrap: wrap;
                        width:0%;
                        padding-top: 46px;
                        height:0rem;
                        top: -173px;
                        left: 0;
                        transition: width 2s height 4s;
                        list-style: none; 
                        height:9rem;
                        width:100%;
                        display: none;
                        :nth-child(2){
                            text-align: left;
                        }
                        .navItem a{
                            text-decoration: none;
                        }
                    }
                    #menu{        
                        &:hover + #menu_content{
                            height:9rem;
                            width:100%;
                            display: block;
                            display: flex;
                            justify-content: space-around;
                        }
                    }
                }
            }
        }
    }
    #section2{
        margin-top: 0px;
        #section2__container{
        
            width: 100%;
            .section2__container__class{
                .section2__containerImage__containers{
                    margin-top: 40px;
                    width: 210px;
                    height: 210px;  
                }
            }
        }
    }
    #section3{
        #section3__about{
            font-size:$h1FontSizeMobile;
        }
        #section3__container{
            width: 100%;
            #section3__container__1{
                text-align: center;
                img{ 
                    width: 210px;
                    height: 210px;
                }
            }
        }
        #section3__container #section3__container__2{
           
            text-align: center;
            p{
            
                width: 90%;
                margin: 0 auto;
            
            }
            #section3__container__2__container{
                width: 100%;
            }
            #section3__container__2__download{
                margin: 0 auto;
                margin-top: 40px;
            }
        }
    }
}
@media(max-width:690px){
    #section2__container__text{
        width: 100%;
        min-width:$minwidth;
    }
    #section2__containerImage{
        position: relative;
    }
    #section2__container__text__container__textContainer__socialMedia{
        position: absolute;
        top: 50px;
    }
    #section2 #section2__container #section2__container__text #section2__container__text__container
        {
        width: 90%;
        margin: 0 auto;
    }
    #section2 #section2__container #section2__container__text #section2__container__text__container
    #section2__container__text__container__textContainer{
        
        margin: 0 auto;
        p{
            width: 90%;    
        }
        h1{
            font-size: 30px;
        }
    }
    #section2 #section2__container .section2__container__class{
        height: 300px;
    }
}```

1 个解决方案

解决方案1
 0  2021-10-07 01:27:45

 body { overflow-x: hidden; /* Hide horizontal scrollbar */ }

Resource: W3Schools资源： W3School

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 删除或隐藏水平滚动条 - remove or hide horizontal scroll bar 删除水平滚动条并使表格更宽 - Remove horizontal scroll bar and make table wider 如何在引导程序中删除水平滚动？ - How to remove horizontal scroll in bootstrap? 如何使水平滚动条永久可见？ - How to make the horizontal scroll bar permanently visible? 如何检测是否有水平滚动条？ - How to detect if there's a horizontal scroll bar? 如何避免带有过渡元素的水平滚动条 - How to avoid horizontal scroll bar with transitioned elements 如何在 select 框中添加水平滚动条 - How to add horizontal scroll bar in select box 如何在iframe中隐藏水平滚动条 - How to hide horizontal scroll bar in an iframe 如何避免firefox中的双横向滚动条 - How to avoid double horizontal scroll bar in firefox 如何在chartjs中向条形图添加水平滚动？ - How to add horizontal scroll to a bar graph in chartjs?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM