Jump to content
Search Community

How to scroll element inside Draggable element?

leoarada test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

Hi there.


I am trying to create a bottomsheet.


As you guys can see, there is a scrollable div element inside draggable element.


If scrollTop is 0 then the element should be dragged toward bottom side when users drag or touch down.


If scrollTop is more than 0 then it should scroll and should not be dragged.


But the problem is that I cannot solve this issue.  


I searched about this issue and i got the hint that I should use allowEvnetDefault option to fix this issue.


And I tried to solve this issue but i can't. How can I fix this issue?

See the Pen KKvXbEy?editors=1111 by jiyong-lee (@jiyong-lee) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @leoarada and welcome to the GreenSock forums!


First is the click event on the red elements that is not GSAP related at all. That will inevitably close the parent element because of a state change in the parent component.


Then you are creating your Draggable instance oustide the GSAP Context scope. When working with react every GSAP instance in a component should be inside the scope of a GSAP Context instance:

useLayoutEffect(() => {
  const ctx = gsap.context(() => {
  return () => ctx.revert();
}, []);

All you have to do is check the scroll position and enable/disable the Draggable instance:




Also I wouldn't recommend doing this:

useLayoutEffect(() => {
  let ctx;
  ctx = gsap.context(() => {});
  // Later on your code, re-assign ctx to a different GSAP Context instance
  ctx = gsap.context(() => {});
  return () => ctx.revert();
}, []);

Because the GSAP instances added to the first assignment of ctx won't get reverted and that could lead to unexpected errors, odd behaviour and memory leaks. Just add stuff to the GSAP context instance using the add() method or even better, as I mentioned before, create every GSAP instance inside the scope of the GSAP Context instance.


Finally try to avoid using top/bottom/left/right in your animations, better use X/Y/xPercent/yPercent in order to use transform and get better performance.


Here is a fork of your codepen:

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


Hopefully this helps.

Happy Tweening!

  • Like 2
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...