0

I'm going crazy, there is something that makes a small scroll horizontally, I managed to locate that part of the web I have to remove to not appear, but as soon as I put that div back, the scroll appears throughout the web, and I do not locate the fault.

ALL CODE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="style2.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
    <title>Document</title>

    <script>
        window.onscroll = function() {scrollFunction()};

        function scrollFunction() {
            var fondo = document.getElementById("fondo");
            var brand = document.getElementById("brand");
        if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
            fondo.style.backgroundColor = "rgba(0, 0, 0, 0.8)";
  
            } else {
                fondo.style.backgroundColor = "transparent";
            }
        }

    </script>
</head>
<body>
    

    <div id="slider-total">
        <nav id="fondo" class="navbar navbar-expand-lg fixed-top">
            <div class="container">
                <a id="brand" class="navbar-brand" href="#"><img src="logo.png" alt=""></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
              <div class="navbar-nav ml-auto">
                <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                <a class="nav-item nav-link" href="#">Features</a>
                <a class="nav-item nav-link" href="#">Pricing</a>
                <a class="nav-item nav-link " href="#">Contact</a>
              </div>
            </div>
            </div>
          </nav>
        
          <div class="info-slider">
            <h1 id="slider-text-1">Diseño de páginas web</h1>
            <p id="slider-text-2">Contrata tu web en el presente y mejora el futuro de tu empresa.</p>
          </div>
        
    </div>
    
    <div id="siguiente-1">
        <div class="container">
            <div class="row">
                <div class="col-12 col-md-6">
                    <h2>Tu web <br>adaptada a todos <br>los dispositivos</h2>
                </div>
                <div class="col-12 col-md-6">
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam error at accusantium ducimus eius exercitationem quam excepturi in alias. Dolorum, ratione unde. Mollitia omnis perferendis minus esse eius eveniet eligendi.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum est nemo molestiae et! Laboriosam ratione, voluptas commodi cupiditate a velit ipsum nesciunt. Facere quia molestias odio deserunt molestiae rem cumque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum assumenda nobis quibusdam placeat saepe beatae dolorem iste soluta eius animi, natus dolore doloribus quasi, enim facere minus, in delectus. Maiores? Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia cum dolorem quas, architecto obcaecati at non hic eos, quaerat eaque repellendus accusantium nulla praesentium, minima numquam ex labore blanditiis totam.</p>
                </div>
            </div>
        </div>

    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

If I remove this div, that part does not appear and the scroll disappears, so the error has to be there

<div id="siguiente-1">
        <div class="container">
            <div class="row">
                <div class="col-12 col-md-6">
                    <h2>Tu web <br>adaptada a todos <br>los dispositivos</h2>
                </div>
                <div class="col-12 col-md-6">
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam error at accusantium ducimus eius exercitationem quam excepturi in alias. Dolorum, ratione unde. Mollitia omnis perferendis minus esse eius eveniet eligendi.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum est nemo molestiae et! Laboriosam ratione, voluptas commodi cupiditate a velit ipsum nesciunt. Facere quia molestias odio deserunt molestiae rem cumque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum assumenda nobis quibusdam placeat saepe beatae dolorem iste soluta eius animi, natus dolore doloribus quasi, enim facere minus, in delectus. Maiores? Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia cum dolorem quas, architecto obcaecati at non hic eos, quaerat eaque repellendus accusantium nulla praesentium, minima numquam ex labore blanditiis totam.</p>
                </div>
            </div>
        </div>
    </div>

CSS CODE:

* {
    box-sizing: border-box;
}

h1,h2,h3,h4 {
    font-weight: bold;
    text-align: center;
    
}

h1 {
    font-size: 6em;
    text-shadow: 0 0 0 rgb(159, 106, 217);
    transition: all 2s;
}

h1:hover {
    text-shadow: 7px -55px 255px rgb(159, 106, 217);
}

h2 {
    font-size: 2em;
}

h3 {
    font-size: 1.6em;
}

#slider-total {
    width: 100vw;
    height: 100vh;
    background-color: #444;
    color: white;
    background-image: url(wall5.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;

    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

#fondo {
    transition: 1s;
}

.nav {
    justify-content: flex-start;
}

.botones {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

.botones i {
    margin: 0 5px
}

.nav-item {
    color: white;
    font-weight: 600;
    font-size: 1.2em;
}

.navbar-expand-lg .navbar-nav .nav-link {
    margin: 0 10px;
}

#slider-total p {
    font-size: 1.7em;
    text-align: center;
    font-weight: lighter;

}

#siguiente-1 {
    padding: 300px 0;
    color: white;
    background-image: url(estrellas.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

#siguiente-1 h2 {
    font-size: 4em;
    text-align: right;
}

#siguiente-1 .col-12 p {
    margin-left: 20px;
    font-size: 1.2em;
    font-weight: lighter;
    background-color: rgba(0,0,0,0.2);
    padding: 0 10px;
}
David
  • 212
  • 1
  • 7
  • 1
    Not sure how people saying to hide the x scrollbar helps. – epascarello Feb 24 '21 at 19:41
  • 1
    Well, it look's like it's useful for him, thanks :) – Luis Angel Pena Zuniga Feb 24 '21 at 19:43
  • 1
    Overflow: hidden; just covers the symptoms, it doesn't fix the real issue, however it is a fantastic trick if you can't find the issue. The issue though is more than likely a user-agent-stylesheet affecting what the user is seeing. The user-agent was adding 8px of margin to the Body class. A Css reset with `body {margin:0;}` fixed the issue on my side. – JCBiggar Feb 24 '21 at 19:44

3 Answers3

2

More than likely your horizontal scroll is coming from a user-agent stylesheet as part of whatever browser you are using. I was using CHROME to inspect your code, and the user agent was putting 8px of margin on your Body Css.

I added body { margin:0; } to your CSS and this fixed the issue with me without having to cover your problem with overflow: hidden;.

Here is what a typical CSS Reset Code looks like:

/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
html,body {
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img { 
    border:0;
}
input{
    border:1px solid #b0b0b0;
    padding:3px 5px 4px;
    color:#979797;
    width:190px;
}
address,caption,cite,code,dfn,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border:0;
}

You can also see more about CSS Resets here and why you should use them.

Also here is a stackover link that has the same CSS Reset that I used and talks more about CSS Reset: CSS reset - What exactly does it do?

JCBiggar
  • 2,477
  • 3
  • 20
  • 33
  • 1
    I really liked your explanation, now I know a little more about this topic. Thank you :) – Luis Angel Pena Zuniga Feb 24 '21 at 19:45
  • 1
    Yours too! Ive used the overflow trick for years! Its probably been the most useful piece of information I ever received. And will definitely be useful for anyone else. – JCBiggar Feb 24 '21 at 19:47
0

I hope's the result goes acording you're need's

You can use this, i just add "overflow-x: hidden" in the next CSS line:

body {
    overflow-x: hidden;
}


* {
    box-sizing: border-box;
}

body {
    overflow-x: hidden
}

h1,h2,h3,h4 {
    font-weight: bold;
    text-align: center;
    
}

h1 {
    font-size: 6em;
    text-shadow: 0 0 0 rgb(159, 106, 217);
    transition: all 2s;
}

h1:hover {
    text-shadow: 7px -55px 255px rgb(159, 106, 217);
}

h2 {
    font-size: 2em;
}

h3 {
    font-size: 1.6em;
}

#slider-total {
    width: 100vw;
    height: 100vh;
    background-color: #444;
    color: white;
    background-image: url(wall5.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;

    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

#fondo {
    transition: 1s;
}

.nav {
    justify-content: flex-start;
}

.botones {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

.botones i {
    margin: 0 5px
}

.nav-item {
    color: white;
    font-weight: 600;
    font-size: 1.2em;
}

.navbar-expand-lg .navbar-nav .nav-link {
    margin: 0 10px;
}

#slider-total p {
    font-size: 1.7em;
    text-align: center;
    font-weight: lighter;

}

#siguiente-1 {
    padding: 300px 0;
    color: white;
    background-image: url(estrellas.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}
     
#siguiente-1 h2 {
    font-size: 4em;
    text-align: right;
}

#siguiente-1 .col-12 p {
    margin-left: 20px;
    font-size: 1.2em;
    font-weight: lighter;
    background-color: rgba(0,0,0,0.2);
    padding: 0 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="style2.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
    <title>Document</title>

    <script>
        window.onscroll = function() {scrollFunction()};

        function scrollFunction() {
            var fondo = document.getElementById("fondo");
            var brand = document.getElementById("brand");
        if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
            fondo.style.backgroundColor = "rgba(0, 0, 0, 0.8)";
  
            } else {
                fondo.style.backgroundColor = "transparent";
            }
        }

    </script>
</head>
<body>
    

    <div id="slider-total">
        <nav id="fondo" class="navbar navbar-expand-lg fixed-top">
            <div class="container">
                <a id="brand" class="navbar-brand" href="#"><img src="logo.png" alt=""></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
              <div class="navbar-nav ml-auto">
                <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                <a class="nav-item nav-link" href="#">Features</a>
                <a class="nav-item nav-link" href="#">Pricing</a>
                <a class="nav-item nav-link " href="#">Contact</a>
              </div>
            </div>
            </div>
          </nav>
        
          <div class="info-slider">
            <h1 id="slider-text-1">Diseño de páginas web</h1>
            <p id="slider-text-2">Contrata tu web en el presente y mejora el futuro de tu empresa.</p>
          </div>
        
    </div>
    
    <div id="siguiente-1">
        <div class="container">
            <div class="row">
                <div class="col-12 col-md-6">
                    <h2>Tu web <br>adaptada a todos <br>los dispositivos</h2>
                </div>
                <div class="col-12 col-md-6">
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam error at accusantium ducimus eius exercitationem quam excepturi in alias. Dolorum, ratione unde. Mollitia omnis perferendis minus esse eius eveniet eligendi.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum est nemo molestiae et! Laboriosam ratione, voluptas commodi cupiditate a velit ipsum nesciunt. Facere quia molestias odio deserunt molestiae rem cumque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum assumenda nobis quibusdam placeat saepe beatae dolorem iste soluta eius animi, natus dolore doloribus quasi, enim facere minus, in delectus. Maiores? Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia cum dolorem quas, architecto obcaecati at non hic eos, quaerat eaque repellendus accusantium nulla praesentium, minima numquam ex labore blanditiis totam.</p>
                </div>
            </div>
        </div>

    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Luis Angel Pena Zuniga
  • 174
  • 8
0

To get rid of the scroll bar add

body{
  overflow-x:hidden;
}

to your css code

  • Advice: If you want won more reputation, copy answers or not read the others before you're post isn't the best way, 'cause it only can reduce youre reputation – Luis Angel Pena Zuniga Feb 24 '21 at 19:30
  • Yes, I was testing this before I noticed the other answer, but it might help someone with the same problem, and then the could just copy/paste the code instead of extracting it form the previous one. –  Feb 24 '21 at 19:34
  • Well. If you say that, i trust you :) – Luis Angel Pena Zuniga Feb 24 '21 at 19:38