Content shift on scrollable div when scrollbar shows

August 18, 2023

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>

>Solution :

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>