Loading video...
Video Failed to Load
Created an infinite scroll for #Angular 🔍 Very limited code 🏎️ No racing conditions 🔄 Keep loading until screen is full 📏 Load on scroll, resize 🚀 No fixed row height needed 📋 Works with any iterable list Want me to create a free article or video? Share or comment.🚀🥰
14,934 views • 2 years ago •via X (Twitter)
10 Comments
“It keeps loading more data until the screen is filled”. Does your library listen to unused viewport height or also works with parent container elements?
Great question mate! It uses the IntersectionObserver class. Whenever #trigger is in the viewport, it needs to load more data. This approach works with all different heights of rows, and even with collapsable rows.
@pick_simplified Why the choose in between. I would appreciate an article AND a video 💪😂
@pick_simplified That sounds like an idea 😂💪🚀
Are you using IntersectionObserver behind the scenes ?
I am! 🤓
Again :)
Please do article or the video or both 🙏🏻🙏🏻🙏🏻🙏🏻
Next level challenge is to have sticky like grouped (eg. contacts list) and drag on one point, scroll and drop it far away in the list/table 🚀
Another challenge: - Choose the parent (window or any element) by an id/ref/class or Directive - Choose what is the content scrolled that has to be listened to by a Directive or other as well
![CSS Trick! ⚡️ You can use scroll-driven animation with background-attachment to create a dynamic glowing card scroller without JS 🔥 section { animation:vibe; animation-timeline:--list; } @keyframes vibe { to{--hue:320;}} .glow {background: hsl(var(--hue) 80% 50%);} Here's how! 🤙 You can use the background-attachment trick used in other glow card demos 😎 article { background-attachment: fixed; } The difference here is that you aren't going to update the fixed background position with your pointer this time. It can remain fixed. The magic part is that as you scroll, the background will leave the card that's leaving and enter the card that's entering ✨ For the extra background glow, you can use a fixed pseudo element on the list container itself 💪 Once that's in place, you're only task is to change the color of the background as you scroll 🤔 Create a custom property declaration for the --hue @property --base { inherits: true; syntax: ' '; initial-value: 0; } Then create an animation that updates this value @keyframes accent { to { --hue: 320; }} The last piece is hooking it up to scroll and there is a little trick in here 👀 First, you need an inline scroll-timeline on the list ul { scroll-timeline: --list inline; } Then you can use timeline-scope to hoist that scroll-timeline up so a parent can use it. You then animate the custom property on this element and let the value cascade down to the places that need it 🔥 section { timeline-scope: --list; animation: accent both linear; animation-timeline: --list; } For example, the glow uses the --hue this way [data-glow] { background-image: radial-gradient( 150px 150px at 50% 50%, hsl(var(--hue) 100% 70% / 0.25), transparent ); } Lastly, scroll-snap is optional of course but plays nice with the scroll-driven animation demos ✨ The key for that is ul { scroll-snap-type: x mandatory; } li { scroll-snap-align: center; } That's it! Pretty fun trick to play with! 🤓 Any questions, let me know! Should we add it to the video walkthrough list? CodePen.IO link below! 👇](https://image.24vids.com/tw-1738039148672426164/ext_tw_video_thumb/1738032359302156288/pu/img/s8BufTPl8FRWOouG.jpg)
