InertiaPlugin and problem with overflow x

[hellodude.it]

Hi,
I'm using InertiaPlugin to have draggable elements and it's great!
The only problem I have is being able to have the image go out of bounds but not "move" the content of the site (see attached video).
I noticed that if I set "overflow: clip" to the parent it works, while "overflow: hidden" doesn't solve the problem.
Is there an alternative to "overflow: clip" as it has almost no compatibility?

 

Thank you,

a.

 

[ZachSaucier]

Overflow hidden should work... Can you please recreate the situation in a minimal demo?

[hellodude.it]

Here it is:

See the Pen mdOqxwz by _alssndr (@_alssndr) on CodePen

[ZachSaucier]

Apply position relative and overflow hidden to the .background element instead:

See the Pen WNoXJYE by GreenSock (@GreenSock) on CodePen

[hellodude.it]

Sorry but the solution works in the codepen but not in the final code.

Can you explain the logic of this intervention? So maybe by understanding it I can adapt the reasoning on the final site.

[hellodude.it]

I updated the codepen to better represent my problem. Try dragging the element when it is already in overflow, dragging it from its left side.

See the Pen mdOqxwz by _alssndr (@_alssndr) on CodePen

[ZachSaucier]

4 hours ago, andrea_pergola said:

Can you explain the logic of this intervention?

Make sure the container that is only the width of the screen has position relative and overflow hidden.

 

3 hours ago, andrea_pergola said:

I updated the codepen to better represent my problem.

Whenever you share demos to these forums, please use the "fork" button on CodePen so that context is not lost in the previous times that you shared the demo  

 

If your goal is to keep it inside of the bounds of the parent, why not use the bounds property?

See the Pen dyOJPNa by GreenSock (@GreenSock) on CodePen

[hellodude.it]

No, for this project it is not ok to keep the image inside of the bounds of the parent.
My goal is for the image to overflow but not to "move" the remaining content.

[ZachSaucier]

Just creating a default Draggable seems to work with your existing CSS unless I'm missing something:

See the Pen qBqpaxL?editors=0010 by GreenSock (@GreenSock) on CodePen

[ZachSaucier]

Alternatively you could use bounds that are just outside of the viewport. That way users can still overlap with the outside of the viewport but can't make it to where the image is no longer able to be seen or clicked on.

[hellodude.it]

It seems that "autoScroll: true" cause the issue.
I need this function to drag the element across the page. Is there any way to make "autoScroll: true" only work on the Y axis and not the X axis?

 

Thank you!

[ZachSaucier]

Can you please create a demo that shows the need for it more clearly? That will make it much easier for us to help you with a solution.

[hellodude.it]

Sorry and here's another demo:

See the Pen gOLoLqo by _alssndr (@_alssndr) on CodePen

(Almost every instruction in this code is critical to the goal of the site)

[ZachSaucier]

Is this what you're going for?

See the Pen ZEBvLwB?editors=0010 by GreenSock (@GreenSock) on CodePen

[hellodude.it]

13 minutes ago, ZachSaucier said:

Is this what you're going for?

 

See the Pen

See the Pen ZEBvLwB?editors=0010 by GreenSock (@GreenSock) on CodePen

by GreenSock (@GreenSock) on CodePen

 

Yeah, sort of.
The only problem with this codepen is that the draggable images have to go over all the content in the Y axis, whereas now they go overflow-y hidden.

[ZachSaucier]

Unfortunately that's a limitation of the spec. If you need to do this sort of thing I would position all of your absolute items on the same (top) level and position them where they need to be at the start. That will simplify all of this  

[hellodude.it]

Ok, i understand.

Thank you!