Search code examples
csselectronwebkitscrollbar

Custom CSS Scrollbar not responding on far right pixel 0

When cursor is dragged far right, to the zeroth pixel, custom scrollbar doesn't respond, instead text is selected as if dragging anywhere inside body.

Put a browser in full screen or maximize, so you know you're not dragging on the window resize border. (On Mac, scroll a bit so the OS scrollbar appears.)

  • Not just on my project, take a look at a random CSS-Tricks page.
  • Default OS scrollbar works as expected (like here on Stackoverflow), custom one doesn't (like on CSS-Tricks).
  • To reproduce in a project, simply declare ::-webkit-scrollbar { ... }, eg. give a it a width and a background color. And yes, ::-webkit-scrollbar-thumb is end to end, that's not the issue I believe.
  • Happens on Chrome and Electron, don't know about Firefox.
  • This is important because it's the last pixel, i.e. the "drag far to the right" mouse action. It's not just a single pixel issue!

Anyone know an elegant solution? Cheers

Solution

  • Got it, quite unexpected behavior.

    Set the body, main container or whatever is your main scroll to position: fixed or absolute, so you have access to right property.

    Set right: -1px;