Join Morten Rand-Hendriksen for an in-depth discussion in this video Create an infinite scroll effect by triggering AJAX on scroll, part of WordPress: REST API.
- [Instructor] At this point, the functionality we built works properly and the only thing we have left is to add some additional UX touches. The first thing is, I want this link to trigger automatically when I scroll down to it. So I don't have to click to get to the previous post. That way I'll get this infinite scroll effect that I'm looking for. To do that we need to change the functionality within previous post trigger. So right now we're looking for a click on load previous a. I'm going to change that to monitor when load previous a comes into view in the browser window.
So first, change this call here and set up a new variable called trigger and just set it to load previous a. Then we need to figure out where exactly this trigger is. So I'll set up a new variable called trigger position, here I'll grab trigger and I'll use the offset function on it. If I set trigger offset to top then the function will tell me how many pixels away from the top my trigger is. Then I'll subtract the total height of the window and what we end up with is a value in trigger position that is either zero, meaning the item is exactly at the bottom of the window or plus, meaning the item is below the bottom end of the window or minus, meaning the item is above the bottom end of the window.
Now we can use an event handler to monitor the scrolling of the page and tell me when this trigger enters view from the bottom. So I'll set up this event handler, window on scroll and here I'll set up a conditional statement that tests if trigger position is bigger than window scroll top. That means that any time the trigger position is below the bottom of the window, then we just return the function in other words, we do nothing.
If on the other hand the trigger position value is lower than window scroll top, meaning the trigger has entered view in the window, then we run get previous post, but there's a little hitch here. If we scroll down a bit, you'll see that previously when we clicked on the link we used this meaning the clicked link and then the attribute within that clicked link to get the data ID. We're no longer clicking on a link so now we need to pass the trigger object to get previous post, then receive it inside get previous post and place it down here, so that it gets the attribute of the trigger.
So it gets that data ID that points at the previous post. To complete my function I need to do a little bit of garbage collection. Make sure that every time a new post is brought into view, I reset my event handler. So I'll say this, the event handler in question, off event. That means the monitoring of the scrolling on the page stops. Then at the very bottom of all my functions I re-initialize previous post trigger and the monitoring starts again, this time tracking the new link, not the old one.
Save this, go back in the browser and scroll to the top, reload the browser and if everything works, I should now be able to scroll to the bottom and the next post automatically pops in. Scroll to the bottom of the next post, the next post automatically pops in. And so on and so on. Here we have infinite scrolling with the posts of the site. But there's a bit of a problem with this user experience that bothers me personally and I see this happen all the time. So I want you to avoid it. When I scroll down here, I'm never really told that I'm loading a new post.
It just kind of magically happens underneath the screen unless something is being very slow. So I want to change the offset here a little bit so that I'm actually scrolling down to see the loading button before the actual loading happens. So inside the trigger position, trigger offset top, I'll say plus, let's say 150 pixels, minus window outer height. This should allow the function to bring the loading button in to view before it gets triggers.
Now if I scroll down again, so now the button appears down here. And when we hit 150 pixels, the function kicks in and loads the next post. It's a subtle change but it's important for the user experience to ensure the user understands that a new post is being loaded. And as you'll see in the next movie, if we add an actual loader to the equation, we'll get a much, much better user experience out of all of this.
- Using a REST client to communicate with a REST API
- Reviewing available routes, endpoints, and arguments
- Adding custom post types and taxonomies
- Altering the API response
- Using PHP for resiliency
- Passing info using wp_localize_script()
- Setting up a REST API request through AJAX
- Outputting selected post data to the front end
- Formatting post data to match a theme
- Triggering AJAX for an infinite scroll effect
- Using AJAX to load subsequent responses