NEW CSS Scroll Features are Game Changers

CSS just dropped a huge new update that makes tons of JavaScript libraries entirely obsolete. And that's because every single thing that you see on this page, from the animation of the header, this table of contents, the scroll to top button, and even this fully functional carousel, are built without using any JavaScript at all. In this video, I'm going to show you exactly how to build every single one of these and how these CSS properties work under the hood. Welcome back to WebDev Simplified. My name is Kyle and my job is to simplify the web for you. And to get started with all these scroll-based animation things in CSS, we need to talk about pretty much the main thing that is powering all of them. And that is this brand new container type called scroll state. So this allows us to essentially use container queries, but instead of worrying about the width or height of that container. Instead, we're caring about where the scroll state inside that container is. And the very first one that I want to look at is the ability to add a button that scrolls us back to the top of the page. You can see when I scroll down on this page in the bottom right hand corner, this button animates out as soon as I have the ability to scroll up to the top. And when I click on it, it scrolls me to the top of my page. So you can see as soon as it knows that I can scroll, the button appears. And when it knows I can't scroll, the button completely disappears. All of this is handled because we're using this container type right here, which manages the scroll state of our container. So here we're putting it on our HTML element, and we're giving it a name of page just to make it easier to work with later on. And if we scroll actually a little ways down inside of our code, you can see we have a container query here. We're checking on that page element. That's that name that we gave this particular thing. So this is just to help us narrow it down cuz we have multiple scrollbased containers in our page. And then we're checking for the scroll state. This is like a check that you can do kind of like you could check the width of a container if you're using width based container stuff. In this case, we're caring about the scroll state. So we put scroll state and then inside parenthesis, we can specify what we're actually caring about. In our case, we care to see if this thing is scrollable in the upward direction. So, we're saying, can we scroll up? In our case, scroll top, scroll towards the top of our container. If we can container, then that means that this is going to return true, which essentially means all the code in this container query is going to run. If we cannot scroll towards the top, this returns false and none of this code runs at all. But if we're scroll down on our page, which means we have the ability to scroll up, well, then we get true returns for this and all the code inside here runs. And to make this button appear and disappear, we're just using some really simple CSS. Normally, we're hiding it off the edge of our page by just pushing 80 pixels. And when it's visible on our page, for example, when we're scrolled down, we're just removing that translate, setting it back to zero. And with a simple transition here, we're able to actually transition what it looks like. So, you can see it transitions in and out from our page just like that. And then when we click on it, obviously, it scrolls us back to the top of the page. Now, to get the behavior for it to actually scroll to the top of the page, this is simple just HTML stuff. If we look at that button, you can see right here, there's that button. It's just an anchor tag with an href that just goes to the ID of top. And if you look, our body has an ID of top. So, whenever we click on this anchor tag link, it scrolls us to the start of whatever that is, which in our case is our body. I could obviously put this anywhere. For example, if I scroll all the way down and I put this inside of our footer. Now, when I actually click on this, it's going to scroll me down to the footer section instead. You can make it work however you want. In our case, I'm just using it to scroll back to the top of the page by putting it on my body element, which is how most people would use something like this. So, really, the bulk of the code that we're doing inside of here is just setting up our container. In our case, it's on the HTML element. We're checking for the scroll state information. That's the important part of our container type. And then we're using a container query to query for that specific scroll state to see if we are able to scroll to the top of the page. This is actually the exact same technique that we're using for our header. You can see when I scroll this down, it actually changes the styles whether it's stuck to the top of my page or we're actually scrolling down like this. And this is something we can do with the exact same container query. So if we look here, our site header, that's this sticky header at the top. I'm doing the exact same thing. Container type, scroll state, container name, whatever you want it to be. In our case, we called it header. And if we scroll down a little ways, you'll see here we have a container query on our header. So we're checking that element. We're checking that scroll state function just like before. But instead of using the ability to see if we can scroll up or down, instead we're checking this stuck property, saying, "Hey, is this particular element stuck in place using position sticky? " So, if we scroll all the way back up to this site header, you can see it's using a position sticky and we put the container type directly on that sticky element. So, if you have an element with position sticky and you want to check to see if it's currently stuck using that position sticky, you can set this container type directly on it. And then inside of our container here, we're checking to see if it's stuck. If it is stuck, then that means it's on the top of our page like this where we're scrolled down, but it's stuck to the top of our page, like position fixed. And we can change, for example, our background color and our box shadow, which is exactly what we're doing, giving it that distinctive look. I could obviously change this color to red, for example. And now you can drastically see the difference whether it's stuck to the top or not because it changes that background color to red. This white background color just looks a little bit better in this more modern example. So, we can use this scroll state in multiple ways, which we'll even cover more of them in the future. But one other thing I want to talk about, if we zoom our page out a little bit, you can see this table of contents on the right hand side. And as I scroll, it actually knows exactly what section of the page I'm on. And it's able to move that table of contents. And I can click on any of these links to move to that

section of my page. Again, this is entirely done using CSS. And this is actually way easier than the other things we've looked at because it doesn't require any fancy container queries or anything like that. If we scroll down to our table of contents section, there's only one CSS property we need to use to make this work, and that is the scroll target group. and we just specify that to be auto. All that this does is it essentially hooks up all these different links with the IDs in them. So if we look at our HTML and we go to this, you can see we have a bunch of links with some hrefs that point to different IDs. And all this scroll target group of auto does is it looks at every single one of the links inside our section. So we can see that we have links pointing to individual IDs on our page. And then it says, okay, when are those IDs on my page? The browser runs its own algorithm and it says which of these ID sections are on the page. In our case, it says the scroll markers is on the page. So it marks that as the section we have highlighted. If we were to scroll our page up, it now says, "Oh, you're inside the scroll state query section. " So we're going to highlight that section. And each of these sections just has an ID. If we scroll down, you can see ID scroll buttons represents this scroll button section. If we scroll down even further, we have a scroll state section represents that section right here. So it's just linking those IDs up and says, is this ID on the page? If so, highlight that particular element. And it just highlights one, whichever is the current one. Now to get those highlighted styles, we need to go back into our CSS and we can use this nice fancy target current which is a pseudo class that we can use a pseudo selector in our particular case that allows us to highlight whatever the current target is for that scroll state target. So the scroll target group is automatically determined for us and whatever the current target is uses this target current property. So we can easily highlight it by changing the color background whatever it is that we want to do. Again I could change the background of this to red to make it super clear. Hey, you can see that giant red thing over there. And every time I change, it highlights that one directly in red forest, which essentially gives us a fully automated table of contents on the side, which you see this in a lot of different blogs or maybe documentation websites. It's very common. And the nice thing is it only takes a few lines of CSS to make it work like we want. Now, the big thing that we can do with this besides some of these small things, which is really important, is this whole carousel section that I have up here. This car section is fully done inside CSS. You can see we have nice animations between the different elements. We're able to scroll between them using these buttons. It properly disables buttons that aren't able to be used. And we can even use these bottom buttons to scroll through them. And I can even swipe through them like that if I really want. It's fully customizable for whatever it is that we want to do. And this is just built on top of the stuff we've already looked at. It's built on top of essentially how this go to top button works. It's built on how this content section works. So if we scroll all the way down to the carousel section, we can understand a little bit more how this works. First of all, if we take a look at our carousel, you can see we are using this thing called scroll marker group. This is essentially a way for us to customize what these scroll markers look like. By default, if you're using that automatic approach, it essentially gives you this content right over here, which is fine for the most part. It just gives you an automatically applied version for your HTML links, which is great for like table of contents. But in a case where you don't have a lot of links like that with table of contents, and instead you want to be able to determine what's being scrolled to based on specific things, like inside of a carousel where you want to just have like markers that you can fully customize entirely to your own liking. This is where this scroll marker group comes in. It's like a fully customizable version of this table of contents section with even more power. Now, by default, if you just apply this scroll marker group after, it's going to apply some default styles for what these groups look like. If we just comment out our custom code that we have for this section, you'll see it's a little bit difficult to see, but there's this like section right here with these buttons. The styling is all messed up cuz I have other things being applied in my code. But essentially, it gives us some default buttons that allow us to move between whichever element we're highlighting over. Obviously though, you probably want to customize what these look like. So, that's where we have this code right here. So if we just uncomment this back in, now we have the ability to customize exactly what these look like using the pseudo element of scroll marker group. So our carousel has a scroll marker group specified on it. And then all we want to do is get the pseudo element, scroll marker group. And now we can customize whatever we want for all the different elements inside here. So I'm using flexbox for example to lay out all these different elements. We can actually customize what the individual elements inside this container look like as well. If we scroll down even further, you'll notice we have a pseudo element called scroll marker. This allows us to determine what each individual scroll marker looks like for each element inside of our page. And this allows us to create essentially a single dot for every single slide inside of our page because we're putting it on the carousel slide. That's what actually gives us these dots right here. If I remove our scroll marker section completely, it essentially gets rid of those dots entirely because now we don't have that scroll marker section. I would just need to comment this out so that my styles still look proper. There we go. You can see those dots have been completely removed because the existence of this pseudo element inside of our CSS is what tells us to add these dots into our page. So essentially for every element that you want to have a dot, you want to add a pseudo element of scroll marker. And that's going to put a dot inside of that container that you created in the previous section, that scroll marker group. It'll create a single dot inside that container for every single scroll marker that you specify. And again, you can customize exactly how you want the styles of these to look, which is great. So you can see here are the default styles which are just giving us those 15 pixel wide circles with a default background color. Also I can change what my styles look like on hover. So you can see when I hover over them they kind of get a slightly darker gray background.

And I can use that exact same target current pseudo class that I was using in the previous section for the table of contents to specify what they look like when they're currently selected. So you can see the currently selected slide has a blue color around it instead of the gray color. So, this scroll marker and scroll marker group just allow you to essentially create a fully custom version that's not tied to anchor links or anything like that. You can tie it to any HTML element you want that's inside of a scrollable container. If we actually go ahead and we look at our carousel, scroll up here a little ways. Actually, there we go. I just passed it. You can see inside this carousel, none of these actually have ids or anything associated with them. There's no anchor tags or links. All of that's automatically handled for you based on how you set up your CSS with the scroll markers and with the scroll marker container or the scroll marker group, I'm sorry, right here. That entirely handles everything for you. Now, the next thing I want to talk about are the animations. You can see when I go to another page, you can see it fades in and grows in size. So, you can see this happens for every single one. Doesn't matter how I get to that particular element, whether it's scrolling, whether it's clicking on a button, I get that full animation. And that is again handled by my different scroll state stuff. So if you look here on each one of my slides, I'm wrapping them inside a container which has a scroll state and I give it a name of a slide. So essentially I'm tracking the scroll based information on this. We know that we can track whether something is stuck using position sticky. has the ability to scroll up or down. We also have the ability to track whether something is snapped or not. Essentially to make it so that this carousel works like a normal carousel. I have hidden my scroll bar. So if I just search for scroll bar width, there we go. You can see I've hidden my scroll bar. If I add that back, you can now see my scroll bar is actually showing up on my page. So, I can scroll this like a normal scrollable element and everything is snapping in place because I'm using scroll snap for all of that. Now, let's get back that scroll bar width to remove it just so we don't have that scroll bar showing up. That's essentially how I'm handling this. It's just a scrollable container that has snap points for each one of my different images. So, it always snaps to a particular point on my page. Now, using this container type of scroll state, I can actually check to see whether or not I am snapped in a current direction. So, using that same exact thing, I give it a name of slide. I check scroll state. In our case, I want to check if something is snapped. And it's snapped in the X direction because I'm scrolling in the horizontal X direction. And if I do have this slide currently snapped into my page, I set the opacity to one and the scale to one. But if I'm not snapped to a particular element, the opacity is 0. 5 and the scale is 75. So this essentially means that all of my elements have a 50% opacity and a 75% scale by default, unless they are the current element that I'm looking at. And then it's going to scale up with a normal opacity and a normal scale. That's what gives you this animation because all of my elements start out smaller and faded. And when they are the active element on my page that I'm currently snapped to, then it's going to change to this higher opacity, higher scale version. Now, this entire section is entirely optional. For example, if I comment out all this code, we'll see the default value. You can see there's 75% scale and 50% opacity. But if I remove that as well, you can see you essentially just get a normal carousel with no animations on it, which still works 100% fine. But if you want to add those animations in there, it's relatively easy to do with just a few lines of CSS. Now, the final thing about this carousel that I want to talk about are these scroll buttons. Because again, we can actually scroll through our carousel using these buttons, which is really great. And it properly disables them when we get to the end of our carousel. And again, this is built entirely into CSS using the double colon, so a pseudo element called scroll button. This scroll button element or pseudo element takes in the direction you want to do. So, left, right, top, bottom, and so on. Right now, we're using star, which selects all of our buttons. So these styles right here are applied to both our left and our right button and even our top and bottom button if we had those particular buttons which in our case we don't. So it automatically will generate these buttons for you. You just want to style them however you want. In our case we're adding quite a lot of styles to position these in the correct location and so on. And if we actually scroll down a little ways, you can see that we have specific styles for our left side button and our right side button. And to make these elements show up on the page, you need to specify a content property to them. So, by putting a content property of a right arrow, that gives us this content right here. If I were remove this content property, you can see this right side button disappears because it'll never show up unless you have a content property. This is similar to like the before and after pseudo element that only show up when you specify a content property. So, my right element, I'm just positioning on the right side of my screen, left element on the left and I'm putting an arrow inside them. You can obviously put it whatever you want inside here. I could, for example, say back, and now it says back inside the button, which looks ugly with my styles, but you can see it works properly. Also, you can specify how you want this to work. So, when I hover, you can see I'm changing the color when it's disabled, which automatically happens because the browser knows I can't scroll anymore to the left. So, it disables the button for me. You can see we get these disabled styles being applied to it. And if I really wanted, I could just come in here and I could say content, and I don't want to have any content at all. And now my button will disappear if there's nowhere for me to scroll over there. So, you can really customize exactly what you want with these buttons. But adding them in is super simple. You don't need anything fancy. You just need to add the scroll button pseudo element and then you need to add a content property inside of there and everything else is handled automatically for you. Now, by default, when you click on these scroll buttons, the way that it scrolls you is essentially the equivalent of one full screen size. So

in my case, the container here is this full width right here. So, it'll scroll me by that exact full width, however large my screen size is. If I had buttons for scrolling, for example, inside my container here, it would scroll me exactly one screen size down every single time that I click the scroll button. So that's essentially how these scroll buttons work. And in the case of a carousel, that's perfect because I essentially want to scroll by one image every single time. So it'll jump me one image to the next. Now, I know it's a lot of work to keep up with all these different things like pseudo elements, pseudo selectors, what this not property do, and all the other complicated code inside here. So if you want to learn more about these advanced CSS selectors or just CSS selectors in general, I'm going to link my full CSS selector cheat sheet in the description. It's completely free for you to use. And if you're worried that you're falling behind at all when it comes to web development technology and things are moving too quickly, I highly recommend checking out my full 2026 web developer roadmap. I update this thing every single year. So even if you're watching this video in the future, it'll be updated to your current year. It's completely free and again, it'll be linked down in the description below and that'll cover everything that you need to know about web development going forward from starting from absolute beginner all the way up to intermediate level skills. With that said, thank you very much for watching and have a good