Hovering over a div doesn't trigger overflow overlay scrollbar in Chrome

Question

I have been using the overflow: overlay CSS property to display a scrollbar only when hovering over a element in Chrome. This technique has been working fine until recently, but suddenly the overlay effect is no longer working. Instead, the normal scrollbar is displayed, taking up space and causing the content to shake when hovered over.

I'm wondering if anyone else has experienced this issue and if there have been any changes in the latest version of Chrome that might have removed support for overlay scrollbars. Any insights or suggestions on how to resolve this would be greatly appreciated.

<div class="content">content</div>
<style>
  .content {
    overflow: hidden;
  }
  .content:hover {
    overflow: overlay;
  }
</style>

Note: I am using the latest version of Chrome.

Expected: When hovering over the element, an overlay scrollbar should appear without affecting the layout of the content.

Actual: The overlay effect is not working, and the normal scrollbar is displayed, causing the content to shake when hovered over.

Thank you in advance for your help!

Could you create a runnable snippet because I'm unable to reproduce your problem (are you sure you're not seeing overflow on body rather than content?). — A Haworth, Jun 07 '23 at 16:56
chrome update - https://stackoverflow.com/questions/76383750/ — killovv, Jun 08 '23 at 02:31

Prince · Accepted Answer · 2023-06-08T11:00:41.673

1

Please give fix-width like given example.

.content {
overflow: hidden;
width: 135px;
height: 100px;
scrollbar-gutter: stable both-edges;
  }
  .content:hover {
   
   
overflow: overlay;
  }

<body>
    
    <div class="content">content  Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, voluptatem?</div>

</body>

edited Jun 08 '23 at 11:00

answered Jun 07 '23 at 13:13

Prince

95
4

Thanks for response. but I need for vertical scrollbar not horizoandal scrollbar – Ramkumar G Jun 07 '23 at 13:32
Check my updated answer – Prince Jun 07 '23 at 13:43
In your updated answer, The contents are shacking when hovering – Ramkumar G Jun 07 '23 at 13:49
Ok, Please Check my updated answer – Prince Jun 07 '23 at 14:13
Thanks, but in your answer the scrollbar is hidden because of that ` ::-webkit-scrollbar { width: 1px;}`. but I need scrollbar with atleast 8px width so the user can use that scrollbar to scroll the content. – Ramkumar G Jun 07 '23 at 14:23
Now, You can check may updated answer with all solution. – Prince Jun 08 '23 at 11:01
Thanks @Prince, it works as per my need so accepting this answer. but it creates empty space for scrollbar on both sites of content. it would be good if the scrollbar present over the content without taking scrollbar space :) – Ramkumar G Jun 09 '23 at 10:20

Hovering over a div doesn't trigger overflow overlay scrollbar in Chrome

1 Answers1