Clipping Animation Overflow

[00:00:00]
>> Kevin Powell: You'll notice one thing here. This is, when I open the menu, it's fine. Look, I'm gonna click the button, but look down here at the bottom of the page, and we're getting some overflow while it's sliding off the page, which is kind of annoying. This is a question that comes up a lot, where, if you have something that's overflowing in certain situations, it can be kind of annoying.

[00:00:22]
And a lot of time you just do body and HTML overflow hidden x, and you hide the stuff going off the x-axis. That doesn't happen often, but you can actually run into weird scroll ball issues with that. I actually had a website at one point that had double scroll bars and I couldn't solve it, and it was because of that.

[00:00:39]
And the first thing a lot of people try is on their, we're gonna come all the way up. I'm just gonna do this on my site header. It doesn't really matter that it's not in the media query. What people try and do here is the overflow x of hidden.

[00:00:59]
And I'm also gonna give that a position of relative, just because right now, the absolute position is relative to the whole page, so it's not actually inside the site header. And now I get this. Has anyone ever run into something like this before? Yeah. This is one of the most infuriating things in CSS, where you're changing the overflow in one direction.

[00:01:22]
But because of the way overflow hidden works is it's creating a new scroll environment, so it actually changes the scroll behavior in both directions. The default is visible when you do an overflow x or an overflow y of hidden. The other axis gets switched to auto and auto adds scroll bars to something.

[00:01:39]
So in this doesn't work. [LAUGH] it's just really annoying. It just broke my whole thing. Another thing, this isn't a progressive enhancement. The new thing that not enough people know about is we have an overflow of clip now as well. The purpose of clip was to introduce non scroll bar environments instead of the way it worked.

[00:01:58]
And it works the way you would think. The overflow hidden would work. We're clipping the thing that's overflowing so it's instead of hiding it, we're clipping it. It's like a clip path, and it just works. And it actually has a really cool bonus feature that doesn't really make sense in what we're doing now, but it also comes with a clip margin, which I don't really know how to show you how it works in this one.

[00:02:22]
But this means you can add or let's do it in both directions overflow, y of clip as well. So this makes no sense here, but since we're talking about it. So I'm clipping it in both directions, so it's hidden. But if I do a clip margin of one rim, overflow clip margin, and you can actually like overflow by a little bit.

[00:02:46]
So I'm clipping it, but I'm giving that that extra space, probably not something you're going to need very often, but I think it's a fun thing, so I just wanted to slip it into the lesson here. But in this case, I would just leave it just like that.

[00:02:57]
And then we get this fun little animation coming in and out like that.