Vertical Scrollbar Leads to Horizontal Scrollbar

Vertical Scrollbar leads to horizontal scrollbar

I found a solution which is working but far from perfect:

I added a padding-right : 15px to my div, to automatically grow the entire div. Now if the vertical scrollbars appear, they fit within the padding so the horizontal width is still ok.

Regretfully the padding of course also shows up when no vertical scrolling is needed, making my div just a tiny bit wider than it would have to be... :/ Well, in my eyes this is still preferable to unneeded horizontal scrollbars.

HTML don't let vertical scrollbar create horizontal scrollbar

Change the div to width: 100%?

body {

    margin: 0;

}

div {

    width: 100%;

    height: 60vh;

    margin: 0 0 1vh 0;

    background-color: #CCC;

    text-align: center;

}

<div>A div tag</div>

<div>A div tag</div>

Horizontal scroll bar causes vertical scroll bar to come when using css Grid

It is a little awkward that you gridify everything. Never seen this before.

The reason is: the horizontal takes up a little vertical space. That is then subtracted from the available vertical space. But unfortunately the grid rows don't adopt to that.

I don't have an authoritative answer whether this is the intended behavior or if it is just not defined by W3C and browser vendors do their own stuff.

But here is a workaround (which applies to your case, but might not be applicable for everyone): I wrapped the boxes of container and broke apart responsibilities. Also I used position: relative and absolute.

html {

  height: calc(100% - 20px);

}

body {

  height: 100%;

  display: grid;

  grid-template-rows: 1fr 1fr;

}

.mainContainer {

  height: 100%;

  display: grid;

  grid-template-rows: auto 1fr;

}

.container {

  display: grid;

  grid-template-rows: 1fr;

  grid-auto-flow: column;

  width: 500px;

  overflow-x: auto;

  overflow-y: auto;

}

.container-wrap {

  display: grid;

  width: 500px;

  overflow-x: auto;

  overflow-y: auto;

  position: relative;

}

.wrap {

  display: grid;

  grid-template-rows: 1fr;

  grid-auto-flow: column;

  position: absolute;

}

.box {

  width: 120px;

}

<div class="mainContainer">

  <h3>Without horizontal scroll - no vertical scroll bar</h3>

  <div class="container">

    <div class="box">1</div>

    <div class="box">2</div>

    <div class="box">3</div>

  </div>

</div>

<div class="mainContainer">

  <h3>With horizontal scroll- vertical scroll is comming</h3>

  <div class="container-wrap">

    <div class="wrap">

      <div class="box">1</div>

      <div class="box">2</div>

      <div class="box">3</div>

      <div class="box">4</div>

      <div class="box">5</div>

    </div>

  </div>

</div>

Use Vertical Scrollbar to Horizontal Scroll Content

The page you mentioned has a fake content div #falsocontenido with its height set to real content's width. It's hidden behind the real content which has it's position set to fixed so it doesn't scroll along with the fake div. After you scroll the page, the negative actual scroll value is taken and left of the real content is set to it. That's the whole logic.

Here is a demonstration

$(window).on('scroll', function() {

  $("#realcontent").css("left", -$(window).scrollTop());

});

#realcontent {

  background-color: #333;

  position: fixed;

  top: 5px;

  left: 0;

  width: 2000px;

  color: #fff;

  height: 100px

}

#fakecontent {

  height: 2000px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="realcontent">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam a est maiores fugiat nesciunt, at ad. Tempore odio velit ipsam, laborum explicabo repudiandae aliquid nostrum qui dolorem obcaecati, autem expedita!</div>

<div id="fakecontent"></div>

Hide vertical scrollbar, keep horizontal and still able to scroll

You can use -webkit-scrollbar, but you need to use width and height instead of display: none

div {

  width: 100px;

  height: 100px;

  font-size: 48px;

  

  overflow: auto;

}

::-webkit-scrollbar {

  height: 0px;

  width: 8px;

  border: 1px solid #fff;

}

::-webkit-scrollbar-track {

  border-radius: 0;

  background: #eeeeee;

}

::-webkit-scrollbar-thumb {

  border-radius: 0;

  background: #b0b0b0;

}

<div>

Lorem ipsum dolor sit amet.

</div>

Shift scroll to move horizontally

---

Related Topics