scrollbar in scrollable div does not extend all the way to the bottom/right

Question

I have a larger div contained within a smaller one; I'm enabling scrolling over the width and height of the internal div using overflow: auto on the outer div. However, in Chrome the scrollbars that appear never scroll all the way to the right/bottom edges, instead, they only ever fully touch the top/left edges. Is there a way to adjust their position to make them more centered and reach all the way to the bottom/right, or to have them not extend as far to the top/left?

Thanks.

HTML:

<body>
  <div class="grid">
    <div class="grid-background">
    </div>
  </div>
</body>

CSS:

.grid {
  width: 700px;
  height: 500px;
  overflow: auto;
  border-radius: 5%;
  position: relative;
}

.grid-background {
  width: 1000px;
  height: 1000px;
  background: linear-gradient(red, yellow);
}

https://jsfiddle.net/Aurus7/cdwfe3yd/6/

I don't know how you can change the height of the scrollbar, I believe the corner-box is needed... However, you can hide this box like in this fiddle: https://jsfiddle.net/cdwfe3yd/7/ please let me know if it helped — Evochrome, Feb 21 '16 at 17:11

score 1 · Accepted Answer · edited May 23 '17 at 10:28

I've made an workaround by creating an scrollbar for a different element that overlays (scrollbar-part of) the grid using a fixed position. The idea came from here. Here is my applied version:

JSFiddle

Code:

JS:

function Scroll(element) {
        var scrollbar = document.getElementById('scrollWrapper');
        var child = scrollbar.appendChild(document.createElement('div')); //create content
        child.style.width= '1000px';
        child.appendChild(document.createTextNode('\xA0'));
        scrollbar.onscroll= function() {
            element.scrollLeft= scrollbar.scrollLeft;
        };
        element.onscroll= function() {
            scrollbar.scrollLeft= element.scrollLeft;
        };
    }

Scroll(document.getElementById('container'));

HTML:

  <div id="container">
    <div class="grid">
      <div class="grid-background">
      </div>
    </div>
  </div>
  <div id="scrollWrapper">
  </div>

CSS:

#container {
  overflow-y: scroll !important;
  overflow:hidden;
  height: 520px;
  width: 721px;
}
#scrollWrapper{
  position:fixed;
  margin-top: -39px;
  width: 700px;
  overflow: hidden;
  overflow-x:auto !important;
}
.grid {
  width: 700px;
  overflow-x:hidden
  position: relative;
  border-radius: 5%;
}

.grid-background {
  width: 1000px;
  height: 1000px;
  //background: linear-gradient(left, red, yellow);
/* TEST GRADIENT (HORIZONTAL)  */
background: #d0e4f7;
background: -moz-linear-gradient(left,  #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%); 
background: -webkit-linear-gradient(left,  #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); 
background: linear-gradient(to right,  #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#87bcea',GradientType=1 );

}

Hope I helped! :)

scrollbar in scrollable div does not extend all the way to the bottom/right

1 Answers1