ScrollTo and position Sticky

[teejay_hh]

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

[OSUblake]

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.

 

[mikel]

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

 

 

[teejay_hh]

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

 

 

[teejay_hh]

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

[mikel]

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

[teejay_hh]

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. 

[mikel]

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

 

 

[teejay_hh]

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