CODEWITHSUNDEEP
csshorizontal-scrolling
mitseas
mitseas

Reputation: 45

Disable horizontal scrolling without overflow hidden

I have create the stucture of my webpage which is composed of a header and 7 divs, all with width:100vw. All the elements have margin:0 and box-sizing:borden-box.

Is it possible to disable the horizontal scrolling without using overflow-x:hidden?

I will post the relevent code parts below, please ask if you want to see the whole document.

HTML:

<body>
        <header id="nav">
            <ul>
              <li><a href="#">Circle</a></li>
              <li><a href="#">Square</a></li>
              <li><a href="#">Line</a></li>
            </ul>
        </header>

        <div id="p5_banner" class="p5_container"></div>

        <div class="arrow"></div>
        <div id="p5_circle" class="p5_container"></div>

        <div class="arrow"></div>       
        <div id="p5_square" class="p5_container"></div>

        <div class="arrow"></div>
        <div id="p5_line" class="p5_container"></div>
</body>

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    max-width:100vw;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

#nav {
    height:100px;
    width:100vw;
    padding: 0 2vw;
    font-weight: 700;
}

.p5_container {
    width: 100vw;
    height: calc(100vh - 100px - 150px);
    background-color: beige;
}

.arrow {
    width: 100vw;
    height: 150px;
    background-color: #6195B2;
}

I apologize if this has been adressed before, all the answer I could find involve either the overflow property or mistakes where the elements where more than 100% of the viewport.

Thank you.

Upvotes: 2

Views: 2664

Answers (3)

Temani Afif
Temani Afif

Reputation: 273261

Simply remove all the width you specified as this is the default behavior of block element to take 100% of width. And you need to pay attention as 100vh is not equal to 100%. The first one include the calculation of scrollbar :

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  max-width: 100vw;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
}

#nav {
  height: 100px;
  padding: 0 2vw;
  font-weight: 700;
}

.p5_container {
  height: calc(100vh - 100px - 150px);
  background-color: beige;
}

.arrow {
  height: 150px;
  background-color: #6195B2;
}
<body>
  <header id="nav">
    <ul>
      <li><a href="#">Circle</a></li>
      <li><a href="#">Square</a></li>
      <li><a href="#">Line</a></li>
    </ul>
  </header>

  <div id="p5_banner" class="p5_container"></div>

  <div class="arrow"></div>
  <div id="p5_circle" class="p5_container"></div>

  <div class="arrow"></div>
  <div id="p5_square" class="p5_container"></div>

  <div class="arrow"></div>
  <div id="p5_line" class="p5_container"></div>
</body>

Upvotes: 0

ankita patel
ankita patel

Reputation: 4251

give max-width:100%; and width:100vw to * class.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  max-width:100%;
  width:100vw;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
}

#nav {
  height:100px; 
  padding: 0 2vw;
  font-weight: 700;
}

.p5_container { 
  height: calc(100vh - 100px - 150px);
  background-color: beige;
}

.arrow {  
  height: 150px;
  background-color: #6195B2;
}
<body>
  <header id="nav">
    <ul>
      <li><a href="#">Circle</a></li>
      <li><a href="#">Square</a></li>
      <li><a href="#">Line</a></li>
    </ul>
  </header>
  <div id="p5_banner" class="p5_container"></div>
  <div class="arrow"></div>
  <div id="p5_circle" class="p5_container"></div>
  <div class="arrow"></div>
  <div id="p5_square" class="p5_container"></div>
  <div class="arrow"></div>
  <div id="p5_line" class="p5_container"></div>
</body>

Upvotes: 2

Shekhar Singh
Shekhar Singh

Reputation: 35

You should have to use % instead of vw, Bacause vw take the full width of your browser viewport. And there is also a vertical scroll bar available at this page. That's why, 100vw width not subtract the width of scroll bar at right side and horizontal scroll is shown. Instead using : 

width: 100vw;

if you want to really remove the horizontal scrolling then use : 

width: 100%;

Upvotes: 0

Related Questions