How can I prevent the scrollbar from fading in Firefox

by

Firefox is fading the scrollbar after moving the mouse off the container. This is so undesirable for my design. Because the users don’t know just by looking at the page that has some content hidden.

<div style="overflow:auto; max-width:100px; max-height:100px">
dfkdjkfdfjkdkjfdfjkkkkkkkkkkkkkkkk
dfdjkfdkjf
dfjkdjfdf


fdjk
</div>

I am using Angular 14. I’ve tried to install a third party library ngx-scroll but is not compatible with my version of angular.

  • I found out in Firefox the horiz scrollbar will be shown also when the mouse is not hovering if you style the container with padding-bottom: 1em;. Such details are driven by browsers and OS settings also to favor user preference in terms of accessibility. One such option on FF is layout.testing.overlay-scrollbars.always-visible = (true) as stated here on SU.

    – 




  • My suggestion works on Windows but still fails on Ubuntu. Another approach could be styling your own custom scrollbar driving the scrollLeft property of the scrollable content. I didn’t go that far because I think it would add unrequired complexity and preferred to delete my previous answer because it didn’t correctly target the question

    – 

  • If I take your html as is, there is no scrollbar because the whitespace is removed and the last line is moved up and is visible w/out a scrollbar. If I add breaks (<br>), the scrollbar shows up.

    – 




Leave a Comment