Disable horizontal scrolling without overflow hidden

Question

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.

ankita patel · Accepted Answer · 2017-11-29 10:38:14Z

2

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>

edited Nov 29, 2017 at 10:38

answered Nov 29, 2017 at 10:19

ankita patel

4,2511 gold badge15 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mitseas Over a year ago

Thank you, i tried it and it worked. The width:100vw property was going to force me adding width to all of my elements (e.g links) but I tried removing it and it still works. width:auto to other elements fixed the problem also. Out for quriosity. How come giving 100% value instead of 100vw to max width fixes the problem? Does it have to do with the browser and the scrollbar width?

ankita patel Over a year ago

The horizontal scroll is present because of the vertical scroll which you can solve by giving max-width: 100% instead of max-width:100vw and vw take the full width of your browser viewport that not include scrollbar width inside it.

Temani Afif · Accepted Answer · 2017-11-29 10:44:15Z

0

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>

edited Nov 29, 2017 at 10:44

answered Nov 29, 2017 at 10:18

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

2 Comments

mitseas Over a year ago

Thank you this worked, how come it didn't previeously work though? Is there some explanation to it so i can avoid future mistakes? Edit: The reason it wasn't working was answered below.

Temani Afif Over a year ago

@mitseas i think the viewport consider the width of the scroll too 100vw is not like 100% .. you can read more here : stackoverflow.com/questions/29551606/…. I also updated my answer to say it ;)

Shekhar Singh · Accepted Answer · 2017-11-29 10:30:09Z

0

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

answered Nov 29, 2017 at 10:30

Shekhar Singh

353 bronze badges

1 Comment

mitseas Over a year ago

Thanks, the question was answered but your comment helped me understood why it didn;t work before.

Collectives™ on Stack Overflow

Disable horizontal scrolling without overflow hidden

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related