Content shift on scrollable div when scrollbar shows

Question

I'm facing an issue where I'm trying to create an invisible scrollbar that appears on hover without causing the content to shift. I'm using styled components in my React application.

Problem: When I apply the CSS to create the invisible scrollbar, the content shifts when the scrollbar appears on hover. I want to achieve the effect of an invisible scrollbar that doesn't cause the content to shift.

.main {
  position: absolute;
  top: 100px;
  left: 100px;
}

.wrapper {
  border: 1px solid red;
  padding: 6px;
  border-radius: 8px;
  position: relative;

  background-color: white;
  border-width: 1px;
  border-style: solid;
  border-color: red;
}

.content {
  color: blue;
  font-size: 16px;
  width: 192px;
  min-height: 56px;
  max-height: 192px;
  overflow: hidden;
  overflow-y: hidden;
}

.content:hover {
  overflow-y: scroll;
}

.content::-webkit-scrollbar {
  width: 4px;
}

.content::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 8px;
}

.content::-webkit-scrollbar-thumb {
  width: 4px;
  background: yellow;
  border-radius: 28px;
  border: none;
  background-clip: content-box;
}

<div class='main'>
<div class='wrapper'>
  <div class='content'>
  testing a note which will wrap up I dont know what is expected testing a note which will wrap up I dont know what is expected testing a note which will wrap up I dont know what is expected testing a note which will wrap up I dont know what is expected testing a note which will wrap up I dont know what is expected testing a note which will wrap up I dont know what is expected testing a note which will wrap up I dont know what is expected testing a note which will wrap up I dont know what is expected
  </div>
</div>
</div>

@zer00ne that would have the scroll bar always visible. The requirement is to have it appear on hover. It is more complex than I hoped for. — Skaranjit, Aug 18 '23 at 18:30
Don't assign `overflow-y: scroll` on `:hover`. Just assign `overflow-y: scroll` on `div` instead of `overflow: hidden`. Also, if you really want an invisible scrollbar shouldn't `::-webkit-scrollbar-thumb` have `background: transparent`? — zer00ne, Aug 18 '23 at 18:30
Try `::-webkit-scrollbar-thumb:hover` `background` changed to `var(--color-blurple-600);` — zer00ne, Aug 18 '23 at 18:36
That would add a hover effect on the scrollbar. I have updated the question with the snippet of code — Skaranjit, Aug 18 '23 at 18:42
@Skaranjit how about making the default scrollbar the same color as the div's background? — imvain2, Aug 18 '23 at 18:43
@imvain2 That's smart. It seem to perfectly fit the requirement. — Skaranjit, Aug 18 '23 at 18:46

score 1 · Accepted Answer · answered Aug 18 '23 at 18:46

You can make the scrollbar's color the same as the div's background. Then on hover simply change the color

.main {
  position: absolute;
  top: 100px;
  left: 100px;
}

.wrapper {
  border: 1px solid red;
  padding: 6px;
  border-radius: 8px;
  position: relative;

  background-color: white;
  border-width: 1px;
  border-style: solid;
  border-color: red;
}

.content {
  color: blue;
  font-size: 16px;
  width: 192px;
  min-height: 56px;
  max-height: 192px;
  overflow: scroll;
}

.content:hover {
  overflow-y: scroll;
}

.content::-webkit-scrollbar {
  width: 4px;
}

.content::-webkit-scrollbar-track {
  background-color: white;
  border-radius: 8px;
}

.content:hover::-webkit-scrollbar-track {
  background-color: yellow;
}

.content::-webkit-scrollbar-thumb {
  width: 4px;
  border-radius: 28px;
  border: none;
  background-clip: content-box;
}

<div class='main'>
<div class='wrapper'>
  <div class='content'>
  testing a note which will wrap up I dont know what is expected testing a note which will wrap up I dont know what is expected testing a note which will wrap up I dont know what is expected testing a note which will wrap up I dont know what is expected testing a note which will wrap up I dont know what is expected testing a note which will wrap up I dont know what is expected testing a note which will wrap up I dont know what is expected testing a note which will wrap up I dont know what is expected
  </div>
</div>
</div>

zer00ne · Answer 2 · 2023-08-18T19:08:34.223

Assign overflow-y: scroll to the <div>.
Assign background: transparent to ::-webkit-scrollbar-thumb.
Assign background: ${any color} to :hover::-webkit-scrollbar-thumb.
Do not assign overflow anywhere else.

:root {
  font: 7.5vmin/1.15 "Segoe UI";
}

.scroller {
  width: 40vw;
  max-height: 40vh;
  padding: 0.5rem;
  border: 1px ridge rgba(0, 0, 255, 0.3);
  border-radius: 8px;
  overflow-y: scroll;
}

.scroller::-webkit-scrollbar {
  width: 0.75rem;
}

.scroller::-webkit-scrollbar-track {
  background-color: transparent;
}

.scroller::-webkit-scrollbar-thumb {
  width: 0.75rem;
  background: transparent;
  border: none;
  border-radius: 28px;
}

.scroller:hover::-webkit-scrollbar-thumb {
  background: blue;
}

<div class="scroller">
  <p>The castle in the Little Red Riding Hoods there sang those fairies. The Rapunzels never kissed the forest. The fast castle here saw some big knights. Both forests in knights happily say the big Cinderellas. The princesses in a wand happily find a wonderful
    Cinderella. Some Evil Queens on the Evil Queen quite buy both proud wands. The Prince Charming beautifully goes apples.</p>

  <p>The princes rather sang the dwarf. The tiny Ginger Bread Men slowly found the big curse. The princes in some forests wishfully kissed a proud Rapunzel. A slow Aladdin in some Snow Whites on the castle somewhere eats the ogres. An Evil Queen in a few
    proud dragons wishfully ate a happy Snow White. The prince on curses there runs the big apples. Proud castles really bit Evil Queens. The castle in some polite beanstalks quite says many princes.</p>

  <p>Proud Evil Queens in the fairy quite cook some faithful beanstalks. A happy beanstalk beautifully finds the Big Bad Wolf. Many Snow Whites really ran the horses. The dragons in a bewildered Aladdin here walk a prince. Polite tiaras in the delightful
    dragon terribly dreamed ogres. A faithful tower never ate those wands. A prince of a Cinderella beautifully kiss a brave tiara.</p>
</div>

Content shift on scrollable div when scrollbar shows

2 Answers2