Question 233054 in CSS Question posted in
Some basic documentation can be found here.

Css – Content shift on scrollable div when scrollbar shows

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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0
    • 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search