Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

your modal scrolls. your page scrolls too. that’s scroll chaining. put 𝚘𝚟𝚎𝚛𝚜𝚌𝚛𝚘𝚕𝚕-𝚌𝚘𝚗𝚝𝚊𝚒𝚗 on the scrollable part of the modal and the background won't scroll with your modal

Manu Arora

43,666 subscribers

14,474 views • 3 months ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Design Engineering Tip If your modal scrolls like this, you’re probably missing one CSS property: overscroll-behavior: contain; It prevents the page behind the modal from scrolling when users reach the top or bottom.

Design Engineering Tip If your modal scrolls like this, you’re probably missing one CSS property: overscroll-behavior: contain; It prevents the page behind the modal from scrolling when users reach the top or bottom.

Gabriel

29,144 views • 1 month ago

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

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

dmytro

54,436 views • 9 months ago

Design Engineering Tip: If your whole page shifts 15px the moment a modal opens, it isn't the modal. It's the scrollbar disappearing, because the library sets overflow: hidden on the body to lock scrolling. Reserve the space before you ever need it: html { scrollbar-gutter: stable; }

Design Engineering Tip: If your whole page shifts 15px the moment a modal opens, it isn't the modal. It's the scrollbar disappearing, because the library sets overflow: hidden on the body to lock scrolling. Reserve the space before you ever need it: html { scrollbar-gutter: stable; }

Gabriel

31,433 views • 27 days ago

YOUR 𝕏 TIMELINE NOW THINKS WITH GROK’S BRAIN Finally, your following feed scrolls with actual intelligence. Grok intelligence. Feed Following Flip: •⁠ ⁠Grok ranks posts so the good stuff floats and the snoozers sink •⁠ ⁠You can still switch to raw chronological if you like pain •⁠ ⁠The feed now predicts what you’ll enjoy before you scroll If your timeline suddenly feels sharper, that’s just Grok doing the thinking! Source: Grok

YOUR 𝕏 TIMELINE NOW THINKS WITH GROK’S BRAIN Finally, your following feed scrolls with actual intelligence. Grok intelligence. Feed Following Flip: •⁠ ⁠Grok ranks posts so the good stuff floats and the snoozers sink •⁠ ⁠You can still switch to raw chronological if you like pain •⁠ ⁠The feed now predicts what you’ll enjoy before you scroll If your timeline suddenly feels sharper, that’s just Grok doing the thinking! Source: Grok

Mario Nawfal

53,191 views • 9 months ago

Fixed this small bug in Linear’s app today which I often see in other apps as well. Here’s a small before/after. The issue: When you open a popover inside a modal (think a custom select), clicking outside the popover to close it also closes the modal. The desired behavior is to close the select on click outside while keeping the modal open. This often happens because custom dropdowns or select components are rendered in a portal. The modal then treats the interaction as an outside click because, technically, the dropdown isn’t inside the modal in the DOM, it’s rendered elsewhere via a portal. The fix depends on your setup, whether it’s Radix/Base UI, fully custom etc. But since you now know the cause of it, you can ask your agent to fix it for you!

Fixed this small bug in Linear’s app today which I often see in other apps as well. Here’s a small before/after. The issue: When you open a popover inside a modal (think a custom select), clicking outside the popover to close it also closes the modal. The desired behavior is to close the select on click outside while keeping the modal open. This often happens because custom dropdowns or select components are rendered in a portal. The modal then treats the interaction as an outside click because, technically, the dropdown isn’t inside the modal in the DOM, it’s rendered elsewhere via a portal. The fix depends on your setup, whether it’s Radix/Base UI, fully custom etc. But since you now know the cause of it, you can ask your agent to fix it for you!

Emil Kowalski

88,922 views • 2 months ago

Your Spellbound Scrolls uncover the chronicles of the unknown. This week, they'll all be revealed.🌊🗻

Your Spellbound Scrolls uncover the chronicles of the unknown. This week, they'll all be revealed.🌊🗻

Amaterasu

55,541 views • 1 year ago

We're excited to power LemonSlice's new video agent product. Turn your real-time voice agent into a video agent using a single photo. The underlying model—which autoscales on Modal 😉—streams infinite-length talking video at 20fps using a single GPU.

We're excited to power LemonSlice's new video agent product. Turn your real-time voice agent into a video agent using a single photo. The underlying model—which autoscales on Modal 😉—streams infinite-length talking video at 20fps using a single GPU.

Modal

17,225 views • 8 months ago

introducing: text scroll animator component for Framer use this component to animate your text with smooth scroll-triggered effects like blur, rotation, scale, and more! comment "SCROLL" and i’ll send you the component. :)

introducing: text scroll animator component for Framer use this component to animate your text with smooth scroll-triggered effects like blur, rotation, scale, and more! comment "SCROLL" and i’ll send you the component. :)

Framer University

20,875 views • 1 year ago

A UX pattern I like: inline dialogs. Instead of blurring the whole background, just push the main content out of focus and replace it with the dialog. Navigation and header stay accessible, and it feels less obtrusive than a standard modal.

A UX pattern I like: inline dialogs. Instead of blurring the whole background, just push the main content out of focus and replace it with the dialog. Navigation and header stay accessible, and it feels less obtrusive than a standard modal.

Sebastiano Guerriero

51,571 views • 6 months ago

‼️ PSYLOCKE FORMULA R MVP ANIMATION Here's your first look at the MVP Animation for the legendary "Fleeting Butterfly" Psylocke costume, available as part of the Jade Scrolls of K'un-Lun Event Pass coming to #MarvelRivals on Friday, October 10th.

‼️ PSYLOCKE FORMULA R MVP ANIMATION Here's your first look at the MVP Animation for the legendary "Fleeting Butterfly" Psylocke costume, available as part of the Jade Scrolls of K'un-Lun Event Pass coming to #MarvelRivals on Friday, October 10th.

Miller Ross

448,011 views • 11 months ago

you'd scroll on your tl and BOOM jimin on jungkook's lap with their hands around each other

you'd scroll on your tl and BOOM jimin on jungkook's lap with their hands around each other

ze⁷

40,750 views • 9 months ago

Pause the scroll and share your all-time favorite gift with Hee-seo 🎁💬 Your next favorite gift might be waiting 💝 #ATreeWithoutRoots #ScrollBreak #LezhinUS #LezhinComics

Pause the scroll and share your all-time favorite gift with Hee-seo 🎁💬 Your next favorite gift might be waiting 💝 #ATreeWithoutRoots #ScrollBreak #LezhinUS #LezhinComics

LEZHIN COMICS

27,825 views • 1 year ago

#EscapeFromTarkov **New Healing Method** I see a lot of questions throughout different chats on Twitch on how to do the new healing method. Set your healing bind to RELEASE -> Hold healing bind (in my case, 4) -> Scroll your scroll wheel up or down to activate the menu

#EscapeFromTarkov New Healing Method I see a lot of questions throughout different chats on Twitch on how to do the new healing method. Set your healing bind to RELEASE -> Hold healing bind (in my case, 4) -> Scroll your scroll wheel up or down to activate the menu

LogicalSolutions

210,831 views • 3 years ago

Multi-modal sensing with lidars, cameras, and radars really helps in achieving the high safety bar we’re setting for ourselves.

Multi-modal sensing with lidars, cameras, and radars really helps in achieving the high safety bar we’re setting for ourselves.

Dmitri Dolgov

73,758 views • 1 year ago

💡 Using Next.js's Intercepting Routes can be useful if you want to show a route while keeping the context for the current page! E.g. we can render an overlaying modal on soft navigation and a standalone page on hard navigation, which requires a full page reload:

💡 Using Next.js's Intercepting Routes can be useful if you want to show a route while keeping the context for the current page! E.g. we can render an overlaying modal on soft navigation and a standalone page on hard navigation, which requires a full page reload:

Lydia Hallie ✨

564,123 views • 3 years ago

Small easter egg in @meshhq's new person modal. The placeholder avatar follows your cursor around 👀 Designed in Sketch, prototyped in Rive, brought to life by our UI engineer Ben.

Arthur Lambillotte

12,775 views • 4 months ago

Kiss the soles that stopped your scroll 💛😘 #Feet #FootModel #Soles #OiledFeet #FeetWorship

Kiss the soles that stopped your scroll 💛😘 #Feet #FootModel #Soles #OiledFeet #FeetWorship

Princess Pussè 💖

17,776 views • 1 month ago