10 results
tagged
scroll
✕
Locking scroll with :has().
It's finally happened – with the release of Firefox 121.0 :has() has landed in all browsers (though writing ":has() has" is sadly no less awkward). In celebration, I thought it a good time to share one of my favourite practical uses of :has() so far – scroll locks.
Imagine that you need to open a modal window, or flyout menu. To prevent from losing the user's place in the page whilst that modal is open – particularly on mobile devices – it's good practice to prevent the page behind it from scrolling. That's a scroll lock.
Let's take a look at how we might implement one.
It's finally happened – with the release of Firefox 121.0 :has() has landed in all browsers (though writing ":has() has" is sadly no less awkward). In celebration, I thought it a good time to share one of my favourite practical uses of :has() so far – scroll locks.
Imagine that you need to open a modal window, or flyout menu. To prevent from losing the user's place in the page whilst that modal is open – particularly on mobile devices – it's good practice to prevent the page behind it from scrolling. That's a scroll lock.
Let's take a look at how we might implement one.
Introducing CSS Scroll Snap Points
CSS scroll snapping allows you to lock the viewport to certain elements or locations after a user has finished scrolling
M o t u s
Animation library that mimics CSS keyframes when scrolling.
Animation library that mimics CSS keyframes when scrolling.
Sticky Sidebar
JS plugin for making smart sticky sidebars.
JS plugin for making smart sticky sidebars.
Infinite Scroll v3
NEW!
Automatically add next page
NEW!
Automatically add next page
SCROLLTRIGGER
Add scroll based animations to your site with ease.
une mini librairie JS pour animer des éléments au Scroll grâce à CSS.
Add scroll based animations to your site with ease.
une mini librairie JS pour animer des éléments au Scroll grâce à CSS.
A jQuery plugin for making smart sticky elements