Jumping page content when using the script

[DrKRIOS]

Hi @kylewetton!

First of all, great work! It looks nice and it's responsive, just what I was looking for.

One thing though: when I use the slider, the page vertical scroll disappears and the whole content jumps around. At first I thought I did something wrong, but now I see the same behaviour in the examples on https://image-compare-viewer.netlify.app/.

Is there any way to fix this?

EDIT: After some digging I've found out the body tag is getting a "overflow: hidden" style, when the slider is in use. Does this serve any purpose? :) Without it everything seems to work as intended.

[kyleatblackfoot]

@DrKRIOS thanks for letting me know, yes if you're using the vertical slider, the library is designed to lock your scrolling while you use the slider. This is because on mobiles dragging the vertical slider is the same action as scrolling.

What browser are you using? The scrollbar disappearing is intention for the above reason, but the content jumping around isn't something I can see on my end.

[DrKRIOS]

@kyleatblackfoot thanks for a quick reply.

I've made a mistake in the original post. What I meant was a horizontal scroll on the slider, and a vertical scroll in browser window (so a regular before/after and a regular browser window with a lot of content).

The 'jumping' occurs on all of the browsers I'm using (Edge, Firefox, Chrome) on windows 10. I'm attaching a picture below. The left image is the example from your page, the right one when i click on the slider - it's the same on all browsers.

https://i.ibb.co/m6tsPdD/IMG-20210701-100821.jpg

[alpabuz]

@kyleatblackfoot maybe the problem is observed only in browsers on Windows (if you're on a Mac, you probably don't see it) and that's why I refused to use this script, although it is awesome. By the way, this happens not only when using a vertical slider, but also a horizontal one.

I noticed that you seem to have included this library in your script https://github.com/willmcpo/body-scroll-lock If so, it would be great if you add reserveScrollBarGap:true option - this gets the user's scrollbar width and adds the appropriate right padding value to the body, thereby eliminating the nasty jump when the scrollbar is removed.

[mattparrilla]

Same issue on my end (using a horizontal scroller causes the page content to jump around due to scrollbar appearing/disappearing). I am also on Windows.

I went in and removed all of the enable/disable scroll lines from the src (ex: https://github.com/kylewetton/image-compare-viewer/blob/master/src/scripts/index.js#L68) and the body-scroll-lock dependency and the tool seems to work fine.

@kyleatblackfoot just to clarify, the scroll lock is just intended to improve behavior of vertical scrollers, right? So removing this for my horizontal scroller shouldn't be an issue?

Thanks for the tool. Very nice functionality.

[kylewetton]

@DrKRIOS @mattparrilla @alpabuz

This is fixed in version 1.4.1. Thanks for the heaps up on this one, I do only have mac at home so I can't test it, but i've added the reserveScrollBarGap:true option to the body-scroll-lock, please let me know how this works out for you

[mattparrilla]

Just tested. Worked for me on Windows. Convenient option! Thanks.

[kylewetton]

Closing as this appears to have fixed the issue

[dusanzvonar]

Hi @kylewetton, thank you for your work, this is exactly what I needed! I just have same problem as mentioned above with the latest version 1.4.1 on windows/linux and chrome/mozzila Do you or @DrKRIOS have any advice?

Thank you!