`overscroll-x-contain` should be the default for any horizontal scroll... container on the web. by default sideways trackpad swipes trigger browser back navigation and users hate this add this CSS and respect their intent .scroll-container { overscroll-behavior-x: contain; }show more

when you add fade out for the scrollable container,... make sure it won't overlap your scroll barshow more

you don't need threejs for this effect just apply... `perspective` to the container and animate each image with `translate3d(...)` over time, where depth is something like `z = z0 + speed * dt` and the rest is handled by the browser easy to map opacity or scroll to speed tooshow more

This one CSS property will fix your z-index headache.... In CSS, a child element with z-index will overlap with any fixed or floating elements outside its container. Instead of stacking higher and higher values to fix it. Use this instead: .card-container { isolation: isolate; } With that, any elements with z-index inside the container will be contained. If you found this useful, follow for more. ❤️show more

extra detail: animate a CSS custom property from 0... to 100 on scroll and use that for a counter() label::after { content: counter(complete) '% complete'; } translate the label using container query units ✨ translate: 0 calc(var(--p) * 1cqh);show more

Is browser scroll-locking helping your site users, or just... frustrating their diagonal gestures? 📐 Bramus breaks down how `scroll-axis-lock: none` gives you control over 2D panning behavior. Check out the interactive demos →show more

OPENAI 🔥: Codex now supports Chrome DevTools Protocol for... browser use. This is a huge superpower that will allow Codex to inspect and modify any website. It is still a very early implementation, but I bet that in several years this will be a default browser capability. If websites are loaded through AI, users will be able to customize their UX on the fly. This is the way 👀show more

This new SwiftUl modifier allows the navigation toolbar to... dynamically hide and reveal based on scroll direction.show more

if you’re dynamically masking a scroll container with css,... consider leaving room for the scrollbar instead of masking it too 🧑‍🍳 mask-repeat: no-repeat; mask-size: calc(100% - 10px) 100px;show more

Use `overscoll-behavior-x: none` when building ui with side scroll... behavior to avoid browser's built in back page behavior.show more

You can enable scroll snapping with CSS scroll-snap-type and... scroll-snap-align 🚀show more

`tabular-nums` should be the default for any number that... updates ( timers, counters, prices, percentages, scores, live data etc ). you can enable this tnum OpenType feature using the CSS property `font-variant-numeric`. .tabular-nums { font-variant-numeric: tabular-nums; }show more

Since each detail view is a scroll view, we... can easily recreate the same effect by combining scroll geometry and custom scroll target behavior. Result👇show more

Should elevators be designed for everyone by default

Every TV should do this by default

Intent-based settlement is becoming the default way DeFi executes.... Be ready for ORBT.show more

You can pin a chat scroller to the bottom... with CSS 𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠-𝚊𝚗𝚌𝚑𝚘𝚛, without having to use MutationObserver or 𝚜𝚌𝚛𝚘𝚕𝚕𝚃𝚘() functions ... ... #𝚜𝚌𝚛𝚘𝚕𝚕𝚎𝚛 * { 𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠-𝚊𝚗𝚌𝚑𝚘𝚛: 𝚗𝚘𝚗𝚎; } #𝚊𝚗𝚌𝚑𝚘𝚛 { 𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠-𝚊𝚗𝚌𝚑𝚘𝚛: 𝚊𝚞𝚝𝚘; 𝚑𝚎𝚒𝚐𝚑𝚝: 𝟷𝚙𝚡; } Browsers run scroll anchoring by default to prevent layout shifts Disable it on children, re-enable it on a 1px anchor at the end and the scroll follows new content down on its ownshow more

CSS is mind-blowing 🤯 Browser does what it can... to keep the menus in view. Even when you scroll. Zero JavaScript (Aside from the Draggable part) This is the important HTML 👇 (anchor) <button id="trigger" popovertarget="menu"> <div popover="auto" id="menu" anchor="trigger">show more

don't know the size of a container in CSS?... container query units 🤝 translate a:hover .corner:nth-of-type(odd) { translate: 100cqi 0; } /* hover intent */ a:hover .corner { transition: translate 0.26s 0.12s; } adapts to content size 👇show more

🤩 I just learned a super cool trick! Do... you know how sometimes you want to record while you scroll on a website, like for a demo or something... But by using the mouse to scroll it turns out to be kinda janky and it doesn't look very good? No? Just me? 🤭 Well, I found out that if you paste this code in the console of your browser: ` setInterval(() => window.scrollBy(0, 4), 16); ` You can make the browser automatically scroll for you! And it looks super cool in the recording! 😎show more

100% css 0% javascript Pretty cool that you can... run animations like this now off the main thread, was always a worry implementing a scroll animation knowing some users might see "jank" Safari and Firefox are sleeping far too long, scroll driven animations are awesomeshow more