Jump to content
Search Community

Draggable object issue with overflow

nuratic test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

Hi All!


I have this code, largely based on an example by OSUblake. I am having an issue with the blocks overflowing the element. I have defined a height (and max-height) each with a value of '37rem' and have set overflow-y to 'scroll':

<section class="listContainer w-1/2" style="height:37rem; max-height:37rem; overflow-y: scroll">
... list items ...


In the image below, there are 9 items. the height of '37rem' will mean that only the first 6 blocks will show, and any more than that would mean that the parent block is scrollable. However, as shown in the image below, this isn't what happens. There is a scroll bar but the blocks still overflow the parent element.



Admittedly, I'm not the best but to the best of my knowledge, this should work. I'm sure this is an issue with me not currently fully understanding how the JS behind it works (I am working on this :)). If you need any more info, please let me know!

Thank you in advance for any help on this issue!

See the Pen MWZyLWY by nuratic (@nuratic) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @nuratic and welcome to the GreenSock forums!


The issue is that the child elements have an absolute position but their parent is not positioned, so the elements are taken out of the flow.


This seems to solve it:

.listContainer {
  position: relative;
  cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/cursor.png),
  cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/cursor.png)
    32 32,

Finally you are using old GSAP syntax and very old versions of GSAP's Core and Draggable. Any particular reason for that? I strongly recommend you to use the latest versions and check the migration guide:


Hopefully this helps.

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

Hi @Rodrigo,


This did help, Thank you!


As mentioned the code is based off an example which I pretty much just did a copy and paste and then started adapting to my needs. I didn't consider that the code may need to be updated, this is now done :) 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...