Horizontal scroll in position: fixed overlay container problems

[SuppahSeb]

Hi all,

 

I have been having some problems for a couple of days now and can not make this work. I have created a quick fork of one of official "Horizontal scrollers" and added an additional element to html + put position: fixed; top, bottom, left, right: 0 to simulate my problem.

 

So the main problem is that the scrolling "height" seems to be bigger than the scrolling "height" of horizontal elements, so when it comes to an end it jumps to the section bellow the container. I figured out that this is some kind of expected behaviour (even though it's weird ), but can I do something to prevent that? I have tried everything, from calculating window height and removing extra height etc. but there must be one simple solution that I am missing  out 😕

 

 

Thank you for your answers

See the Pen zYBNVao by SuppahSeb (@SuppahSeb) on CodePen

[ZachSaucier]

Hey SuppahSeb. Why do you need the position: fixed and such on the container? Removing those properties fixes the issue.

[SuppahSeb]

Hi ZachSaucier,

 

I need the position: fixed because I want to show it in overlay/popup which has the position: fixed (the element needs to be hidden and only gets visible in an overlay when clicked on "Show" button).

 

 

[ZachSaucier]

In that case you should make the overlay the scroller (not the window). That way you don't need to affect the other content on the page at all.