I've been trying to fix this little overflow problem for quite some time now and i just don't really know what to do now.
Backstory: I'm using the zoomooz.js plugin to zoom into elements. Now I've got that part working. I have a horizontal scroll and if I scroll and press an element... it zooms and it zooms out when I click outside of it.
Now I'm happy that I got that working.
Problem:
I've put my stuff in a jsfiddle: https://jsfiddle.net/8s17eeoh/
So I've got this horizontal scroll thing going on and it works BUT.. as soon as one of the boxes is half in the viewport, it cuts the box because the viewport stopped. To give you an example..(jsfiddle) if you see 5 white boxes and the fifth one is just inside the viewport... Press nr4 and you will see that number 5 is being cut off.
I was looking into how to change the overflow and I noticed I could change the overflow:screen to overflow: visible and it does fix the problem...but now another problems arises and that's the zoom out doesn't work when you scroll pas the browser viewport.
.screen{
display:flex;align-items:center;
height:100%;
width:100vw;
overflow: scroll;
position: absolute;
margin:0;
padding:0;
}
I need some expert eyes on this since I'm just a lonely beginner.
Thanks
-kjegwan
