Giters

noeldelgado / gemini-scrollbar

:first_quarter_moon: Custom overlay-scrollbars with native scrolling mechanism for web applications

Home Page:https://noeldelgado.github.io/gemini-scrollbar/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Zoom-out issue

madmoizo opened this issue · comments

commented

If you zoom-out, the native scrollbar become visible

commented

Can be fixed with something like:
clientWidth + (scrollbarWidth / window.devicePixelRatio)

commented

Nice, thanks for the info!

I made this small module about 2 months ago with the plan of using it to fix this issue... but, I just haven't been able to do so, pretty busy with other stuff..

I'll definitely try your solution, or if you don't mind creating a PR 🙃, that would be pretty awesome too.

Thanks @frlinw, you're the best!

commented

I'm not using gemini-scrollbar, I built my own component for Vue (inspired by your logic) because I need some advanced autoresize capabilities

The fix should be quick

Save the original scrollbar size on init
https://github.com/noeldelgado/gemini-scrollbar/blob/master/index.js#L33
return Math.round(sw * window.devicePixelRatio)

Add the scrollbar width relative to devicePixelRatio
https://github.com/noeldelgado/gemini-scrollbar/blob/master/index.js#L216
this._viewElement.style.width = ((this.element.offsetWidth + Math.round(SCROLLBAR_WIDTH / window.devicePixelRatio)).toString() + 'px');

I'm using Math.round because browsers have some issues with float px