Hopefully a simple question, but I can't find an answer.

I have a vertically scrolling element within a wrapper with radius corners, giving the appearance of the scrollable element being viewed through a window. I would like to keep the vertical scrollbar, but as it's the full height of the wrapper, the ends appear over the curved corners.

I'd like to reduce the scale of the scrollbar so it's about 20px shorter than the wrapper height, so the curved corners remain visible.

::-webkit-scrollbar gives a lot of options, but none seem to alter the track length/scale. Can it be done?

Example of the issue here:

<style>
    .tablescroll {
      max-width: 946px;
      height: calc(100vh - 200px);
      top: 300px;
      margin: auto;
      border: 1px solid #900;
      border-radius: 15px;
      box-shadow: inset 5px 5px 3px #888;
      background-color: #ccc;
      overflow-x: hidden;
      overflow-y: scroll;
      padding: 10px 0px;
    }
    table.enthcompare {
      position: static;
      width: 926px;
      border-collapse: separate;
      border-spacing: 10px 0px;
      vertical-align: top;
    }
</style>

<div class="tablescroll">
  <table class="enthcompare">
    <tr>
      <td>
        blah<br>
        blah<br>
        blah<br>
        blah<br>
        blah<br>
        blah<br>
        blah<br>
        blah<br>
        blah<br>
        blah<br>
        blah<br>
        blah<br>
        blah<br>
        blah<br>
      </td>
    </tr>
  </table>

Hopefully a simple question, but I can't find an answer.

I have a vertically scrolling element within a wrapper with radius corners, giving the appearance of the scrollable element being viewed through a window. I would like to keep the vertical scrollbar, but as it's the full height of the wrapper, the ends appear over the curved corners.

I'd like to reduce the scale of the scrollbar so it's about 20px shorter than the wrapper height, so the curved corners remain visible.

::-webkit-scrollbar gives a lot of options, but none seem to alter the track length/scale. Can it be done?

Example of the issue here: https://codepen.io/Juggers2k/pen/WbNLqYx

<style>
    .tablescroll {
      max-width: 946px;
      height: calc(100vh - 200px);
      top: 300px;
      margin: auto;
      border: 1px solid #900;
      border-radius: 15px;
      box-shadow: inset 5px 5px 3px #888;
      background-color: #ccc;
      overflow-x: hidden;
      overflow-y: scroll;
      padding: 10px 0px;
    }
    table.enthcompare {
      position: static;
      width: 926px;
      border-collapse: separate;
      border-spacing: 10px 0px;
      vertical-align: top;
    }
</style>

<div class="tablescroll">
  <table class="enthcompare">
    <tr>
      <td>
        blah<br>
        blah<br>
        blah<br>
        blah<br>
        blah<br>
        blah<br>
        blah<br>
        blah<br>
        blah<br>
        blah<br>
        blah<br>
        blah<br>
        blah<br>
        blah<br>
      </td>
    </tr>
  </table>

• html
• css
• scrollbar
• scale

1 Answer 1

::-webkit-scrollbar is a non-standard feature therefore even if it could solve your issue it would not be recommended.

The simplest reliable solution would be to add an intermediate div that takes care of the scroll and having the outer div clip the excess scrollbar. If you wish to "decrease the scrollbar track length" you can just add padding to the outer div.

.tablescroll {
  max-width: 946px;
  height: calc(80vh);
  top: 300px;
  margin: auto;
  border: 1px solid #900;
  border-radius: 15px;
  box-shadow: inset 5px 5px 3px #888;
  background-color: #ccc;
  overflow: hidden;
}
.tablecontain {
  overflow-x: hidden;
  overflow-y: scroll;
  height: 100%;
}
table.enthcompare {
  position: static;
  width: 926px;
  border-collapse: separate;
  border-spacing: 10px 0px;
  vertical-align: top;
}

  top: 300px;
  margin: auto;
  border: 1px solid #900;
  border-radius: 15px;
  box-shadow: inset 5px 5px 3px #888;
  background-color: #ccc;
  overflow: hidden;
}
.tablecontain {
  overflow-x: hidden;
  overflow-y: scroll;
  height: 100%;
}
table.enthcompare {
  position: static;
  height: fit-content;
  width: 926px;
  border-collapse: separate;
  border-spacing: 10px 0px;
  vertical-align: top;
}

<div class="tablescroll">
  <div class="tablecontain">
    <table class="enthcompare">
      <tr>
        <td>
          blah<br>
          blah<br>
          blah<br>
          blah<br>
          blah<br>
          blah<br>
          blah<br>
          blah<br>
          blah<br>
          blah<br>
          blah<br>
          blah<br>
          blah<br>
          blah<br>
          blah<br>
          blah<br>
          blah<br>
          blah<br>
          blah<br>
          blah<br>
          blah<br>
          blah<br>
          blah<br>
          blah<br>
          blah<br>
          blah<br>
          blah<br>
          blah<br>
        </td>
      </tr>
    </table>
  </div>
</div>