CODEWITHSUNDEEP
htmlcss
Sam
Sam

Reputation: 2331

Hover on scroll effect causes width of element to change

I am trying to make a scrollbar appear only when a user hovers over the component. The problem is that the scrollable element has a cutoff on the side of it when it is hovered compared to when it is not, like in the video below

enter image description here

This is the css I am using to make the scrollbar appear when it is hovered over

.scroll-on-hover:hover {
    overflow-y: scroll !important;
}

And then it's applied like

<div style="position: fixed;" class="scroll-on-hover">
       <nav style="background-color: navy; height: 100%;" >
           ...
       </nav>
</div>

Upvotes: 0

Views: 196

Answers (1)

Leo
Leo

Reputation: 937

It happens because you are forcing it to show the scroll bar.

It is the expected behavior, a scroll bar will always occupy and overlap the content.

As you say:

I am trying to make a scrollbar appear only when a user hovers over the component. ...

There are two problems:

  1. By making it just scrollable or not, you are not showing or hidding the elements.
  2. The :hover works only on desktops, mobile cannot do that.

For the first problem, I encourage you to use "play" with display, translate, or any other prop that actually can hide and show the elements.

For the second, a similar approach can be :active, it's when you click and touch on mobile, instead of :hover that works only for the desktop mouse.

Edit

What you are looking for, is not a native scroll bar, it is a div, actually a lot of them and a huge peace of functionality.

Facebook is making a mimic of a scroll bar, a custom one, and for sure it's way more complex than an overflow-y style.

Upvotes: 1

Related Questions