Search code examples
htmlcsslayoutscrollbaroverflow

How to move the scrollbar away from the right border of a component

In an application I display data in table form.

The main columns are grouped in the red frame representing the parent component. I want to add an additional summary column on the right outside the scrollable area.

what I tried is to play with the overflow-x:visible, but it doesn't work as explained here : https://www.brunildo.org/test/Overflowxy2.html

How can I handle this with a pure html/css solution ?

enter image description here

.parent {
  border:2px red solid;
  height:400px;
  overflow-y:scroll;
  overflow-x:visible;
  width:500px;
}

.child {
  background:green;
  height:50px;
  margin-bottom:2px;
  width:600px;
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Solution

  • Finally, I found a suitable solution for my scrollbar problem.

    the following modifications are necessary:

    • the width of the parent must be equal to that of the child
    • the overflow-y of the parent must be set to overlay.
    • specify a width of the scrollbar of 200px.
    • use the scrollbar customization to have a thinner track & thumb than the scrollbar using a large border-right: 190px and the background-clip: content-box.

    I think it can still be optimized

    enter image description here

    .parent {
  border:2px red solid;
  height:300px;
  overflow-y:overlay;
  width:600px;
}

.parent::-webkit-scrollbar {
    width: 200px;
}

.parent::-webkit-scrollbar-track {
    background:yellow;
    background-clip: content-box;
    border-right: 190px solid transparent;
}

.parent::-webkit-scrollbar-thumb,
.parent:hover::-webkit-scrollbar-thumb {
  background-color:blue;
  background-clip: content-box;
  border-right: 190px solid transparent;
}

.child {
  display:table-row;
  font-size:20px;
  height:50px;
  margin-bottom:2px;
  padding-top:10px;
  width:600px;
}

.column--1,
.column--2 {
  background:#C4FFCE;
  display:table-cell;
  text-align:center;
  vertical-align:middle;
  width:150px;
}

.column--1 {
  width:435px;
}

.space {
  width:55px;
  }
    <div class="parent">
  <div class="child">
    <div class="column--1">column 1</div>
    <div class="space"></div>
    <div class="column--2">column 2</div>
  </div>
  <div class="child">
    <div class="column--1">column 1</div>
    <div class="space"></div>
    <div class="column--2">column 2</div>
  </div>
  <div class="child">
    <div class="column--1">column 1</div>
    <div class="space"></div>
    <div class="column--2">column 2</div>
  </div>
  <div class="child">
    <div class="column--1">column 1</div>
    <div class="space"></div>
    <div class="column--2">column 2</div>
  </div>  
  <div class="child">
    <div class="column--1">column 1</div>
    <div class="space"></div>
    <div class="column--2">column 2</div>
  </div>
  <div class="child">
    <div class="column--1">column 1</div>
    <div class="space"></div>
    <div class="column--2">column 2</div>
  </div>
  <div class="child">
    <div class="column--1">column 1</div>
    <div class="space"></div>
    <div class="column--2">column 2</div>
  </div>
  <div class="child">
    <div class="column--1">column 1</div>
    <div class="space"></div>
    <div class="column--2">column 2</div>
  </div>
  <div class="child">
    <div class="column--1">column 1</div>
    <div class="space"></div>
    <div class="column--2">column 2</div>
  </div>
</div>