Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
teejay_hh

ScrollTo and position Sticky

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi, I have build a really small component (see codepen) which is a list of entries with the first being sticky element. I would like to scroll to an entry which seem slightly buggy due to the sticky element, or I am doing something wrong. If you click on the the last element you will see what the problem is. It works well for entries where scrolling is required, but if en entry sits at the end (entry 9 for instance), where we can't scroll to, then the scroller does not scroll to very end but leaves the gap at the bottom (offset of 30px). Is there a way around this (without adding a margin-bottom to the ul list). 

 

I hope I could explain it well, if not, please let me know and will try to elaborate. 

 

Best regards Thomas

 

PS: the markup can't be changed

See the Pen OBQNWE by teejayhh (@teejayhh) on CodePen

Link to comment
Share on other sites

4 hours ago, teejay_hh said:

Is there a way around this (without adding a margin-bottom to the ul list). 

 

Probably not. If you can't change the markup, then you're going to have to manually calculate the scroll amount.

 

  • Like 3
Link to comment
Share on other sites

Hi @teejay_hh,


Why 'margin-bottom'? Set a height that offers enough room to scroll.

 

See the Pen PyQJJa by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

  • Like 2
Link to comment
Share on other sites

thx for the suggestions, I dont really want to set height or margin on any element. For this case it really only affects the last entry. I might be able to get away the `max` solution for the last entry

 

{ y: 'max', offsetY: 0 }

 

I kind of still think scrollTo should have the smarts to do this by itself. The same happens for fixed elements and window scroll btw. Try scrolling to the last item

 

See the Pen EdQyNb by teejayhh (@teejayhh) on CodePen

 

 

Link to comment
Share on other sites

10 hours ago, mikel said:

Hi @teejay_hh,


Why 'margin-bottom'? Set a height that offers enough room to scroll.

Happy tweening ...

Mikel

 

 

 

For that I would have to measure the ul for its height. Adding a margin-bottom to the ul of the 'offsetY' value would do the trick, but its uggly :)

Link to comment
Share on other sites

Hi @teejay_hh,


If the road ends 1 mile in front of the house, you can not drive to the house.
That's a fact.


If you want to do an alternative trick, do it.

 

Best regards

Mikel

  • Like 1
Link to comment
Share on other sites

Hello mikel, your suggested solution is simply not working in a dynamic context, which I didn’t make quite clear, the search input field could have given it away though.  This is why this can’t be a pure css solution. So I had to find a difference solution.  

And the more I think about it the more I think that the offsetY behaviour is buggy in that regard, but it might not be trivial to fix. Anyway the solution above is workable and easy enough to implement. 

 

Cheers everyone. Have great weekend... soon. 

Link to comment
Share on other sites

Hi @teejay_hh,


As @OSUblake already mentioned, it can also be calculated.
Combine var number with the search input / 'output' and everything will be fine.

 

See the Pen YJaQqa by mikeK (@mikeK) on CodePen

 

Happy searching ...

Mikel

 

 

  • Like 2
Link to comment
Share on other sites

Thx, mikel but I really prefer my solution as it does exactly what I expect scrollto to do in first place. Adding additional space to the bottom of a scrollable area is not great, imagine this on a website with a fixed header its simply not working like that. 

 

I really appreciate your input, but you suggested exactly the one thing, I mentioned in my first post , that didn’t want to do. 

 

Have a great weekend 

Thomas

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.
×