CODEWITHSUNDEEP
htmlcssreactjswebkitscrollbar
Trever Thompson
Trever Thompson

Reputation: 709

Website scrollbar becoming invisible when small

I am using the -webkit-scrollbar pseudo elements to customize the scrollbar on a React web-app for desktop webkit browsers. It is being used for scrolling through messages in a 'chat-box' like element whose overflow-y property is set to 'auto'. For the most part, this functions properly as can be seen in the image below (grey scrollbar at right):

enter image description here

As more messages are added, the height of the grey scrollbar thumb naturally decreases. An issue arises when the message box is populated with many long messages:

The thumb seems to become smaller and smaller, until it disappears. The scrolling functionality still works. This can be seen in the image below (scrollbar at right is gone):

enter image description here

Below is the css code which styles the scrollbar (in order to create a 'padding' for the scrollbar, I used the answer to this question):

::-webkit-scrollbar {
  width: 24px; 
}
::-webkit-scrollbar-thumb {
  border: 9px solid rgba(248, 230, 230, 0);
  background-clip: padding-box;
  border-radius: 20px;
  background-color: #d9d9d9;
  box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
}

I unsuccessfully attempted to resolve this by adding min-height: 5px; to the scrollbar.

JSFiddle (Add more letters to see scrollbar disappear).

Any help will be greatly appreciated.

Upvotes: 2

Views: 572

Answers (2)

Kareem Dabbeet
Kareem Dabbeet

Reputation: 3994

the problem is with background-clip: padding-box;.

When the content becomes too long its height becomes 0

Add min-height with larger height than 5px (something like 30px) and it'll work fine. 

div {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  word-wrap: break-word;
  overflow-y: scroll;
}

::-webkit-scrollbar {
  width: 24px;
}

::-webkit-scrollbar-thumb {
  border: 9px solid rgba(248, 230, 230, 0);
  background-clip: padding-box;
  border-radius: 20px;
  background-color: #d9d9d9;
  min-height: 30px;
  box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
}
 <div>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

    </div>

Upvotes: 2

Rotem Lurx Horovitz
Rotem Lurx Horovitz

Reputation: 154

Most mobile browsers automatically hide the scrollbar when not scrolling. The reason for that is to allow more space to be used by content, in an already small-width environment.

While scrolling the scrollbar should be visible, and disappear when you stop scrolling, as you can see in this unstyled example (open in mobile/mobile mode. on desktop you might have to refresh after starting mobile mode to see the effect correctly):

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, odit ratione saepe in molestiae, nesciunt recusandae voluptas corrupti ex autem fugiat commodi totam exercitationem laboriosam suscipit facilis non optio iusto.</p> (repeat many times)

https://codepen.io/anon/pen/bXBZRX

Upvotes: 0

Related Questions