search

kylewetton / image-compare-viewer

Compare before and after images, for grading and other retouching for instance. Vanilla JS, zero dependencies.
https://image-compare-viewer.netlify.com
MIT License
553 stars 34 forks source link

Scroll bar is hidden when moving slider #38

Closed RyanGosden closed 2 years ago

RyanGosden commented 2 years ago

Minor issue which causes the page to 'jump' to the hiding and showing of scrollbar.

Edit: Looking at your src, it seems like this is deliberate. Is there a specific reason to why the scrollbar is disabled?

tobkum commented 2 years ago

Wondering the same here, that makes for weird jumps in the layout

j3ll3yfi5h commented 2 years ago

Same issue here...

j3ll3yfi5h commented 2 years ago

Workaround here: https://github.com/j3ll3yfi5h/image-compare-viewer/commit/516da11c52aac38469cad225735fc209d1479682

kylewetton commented 2 years ago

@RyanGosden @tobkum @j3ll3yfi5h

The code is meant to keep your scrollbar offset in tact so that your layout doesn't jump. My layout doesn't jump on my end. I've just testing Windows and Mac across a range of browsers.

The reason for the body scroll lock is for mobile support, the page should remain fixed when you're interacting with the compare viewer with your finger. It will outright break vertical option if it doesn't lock.

What browsers / devices are you using that your layout is popping?

Does the demo pop for you?

https://image-compare-viewer.netlify.app/

j3ll3yfi5h commented 2 years ago

@kylewetton

If you add...

html {
    overflow-y: scroll;
}

...you will see the jumping as well.

I'm currently trying to find out, if scrollbars on html-elements are wrong and why or not...

j3ll3yfi5h commented 2 years ago

This issue is based on the used library https://github.com/willmcpo/body-scroll-lock

Related (unresolved) issues are: https://github.com/willmcpo/body-scroll-lock/issues/108 https://github.com/willmcpo/body-scroll-lock/issues/244