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 · Answer 1 · 2017-11-29T10:38:14.410

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 '17 at 10:38

answered Nov 29 '17 at 10:19

ankita patel

4,201
1
13
28

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? – mitseas Nov 29 '17 at 10:32
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. – ankita patel Nov 29 '17 at 10:42
This was so helpful! Thank you @ankitapatel – Razboy20 Apr 19 '19 at 18:00

Temani Afif · Accepted Answer · 2017-11-29T10:44:15.507

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>

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. — mitseas, Nov 29 '17 at 10:38
@mitseas i think the viewport consider the width of the scroll too 100vw is not like 100% .. you can read more here : https://stackoverflow.com/questions/29551606/why-does-vw-include-the-scrollbar-as-part-of-the-viewport. I also updated my answer to say it ;) — Temani Afif, Nov 29 '17 at 10:42

score 0 · Answer 3 · answered Nov 29 '17 at 10:30

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 '17 at 10:30

Shekhar Singh

35
3

Thanks, the question was answered but your comment helped me understood why it didn;t work before. – mitseas Nov 29 '17 at 10:39

Disable horizontal scrolling without overflow hidden

3 Answers3