正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

Single-axis scroll containers fix long-standing CSS overflow quirks → Key capabilities ready for testing in Chrome 153 (Beta, Dev, or Canary): 📌 Pair `auto` with `clip` to enable a single-axis scroll container 🔍 Detect support reliably using `@ supports named-feature()` 🚫 Prevent accidental two-dimensional scrollers in your layouts

Chrome for Developers

424,190 subscribers

15,216 次观看 • 5 天前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

💡 Do you know about the `clip` value? In CSS, we can clip a container along a single axis by using the `clip` value. Learn more in this interactive article about the `clip` value:

💡 Do you know about the `clip` value? In CSS, we can clip a container along a single axis by using the `clip` value. Learn more in this interactive article about the `clip` value:

Ahmad Shadeed

10,533 次观看 • 1 年前

I put together some Tailwind CSS utilities for masking/fading edges of scroll containers using scroll-driven animations. Link below ↓

I put together some Tailwind CSS utilities for masking/fading edges of scroll containers using scroll-driven animations. Link below ↓

Tim Wilson

52,866 次观看 • 4 个月前

FORTNITE IS WORKING ON FIXING THE ISSUE WITH THE SCROLL WHEEL "we're working to fix this issue when using scroll wheel for editing or building"

FORTNITE IS WORKING ON FIXING THE ISSUE WITH THE SCROLL WHEEL "we're working to fix this issue when using scroll wheel for editing or building"

Backers

37,137 次观看 • 1 个月前

Built a React Aria Calendar with swipe gestures to navigate between months! Uses CSS scroll snap for native 120fps animations, with a neat trick to enable infinite scrolling in both directions. 👇

Built a React Aria Calendar with swipe gestures to navigate between months! Uses CSS scroll snap for native 120fps animations, with a neat trick to enable infinite scrolling in both directions. 👇

Devon Govett

42,499 次观看 • 11 个月前

Looking for your cheque book or card? Track it easily using the Deliverable Tracker on the Axis Support Website. Simply visit Axis Support, enter your details, select your product, and get instant status updates.

Looking for your cheque book or card? Track it easily using the Deliverable Tracker on the Axis Support Website. Simply visit Axis Support, enter your details, select your product, and get instant status updates.

Axis Bank

11,578 次观看 • 2 个月前

Tailwind CSS Tip ✨ You can create a pure css carousel in Tailwind CSS using scroll snap. Live demo ↓ (21/30) follow for 9 more tips 🔔

Tailwind CSS Tip ✨ You can create a pure css carousel in Tailwind CSS using scroll snap. Live demo ↓ (21/30) follow for 9 more tips 🔔

Surjith S M ✪

203,392 次观看 • 3 年前

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 →

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 →

Chrome for Developers

23,568 次观看 • 7 天前

Modern CSS and HTML APIs are making web layouts incredibly powerful. From declarative scroll-triggered animations to element-scoped view transitions, the platform is expanding. Catch up on every major feature update →

Modern CSS and HTML APIs are making web layouts incredibly powerful. From declarative scroll-triggered animations to element-scoped view transitions, the platform is expanding. Catch up on every major feature update →

Chrome for Developers

14,978 次观看 • 2 个月前

Annotations in Dev Mode is now live! As a Figma designer, I’ve always had a love-hate relationship with marking up a file. Today, I’m writing about how this feature came to be — for both design and dev. Scroll 🧵 and/or read the blog:

Annotations in Dev Mode is now live! As a Figma designer, I’ve always had a love-hate relationship with marking up a file. Today, I’m writing about how this feature came to be — for both design and dev. Scroll 🧵 and/or read the blog:

Oscar Nilsson

46,537 次观看 • 2 年前

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. ❤️

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. ❤️

Ali

16,738 次观看 • 4 个月前

Make your UI smarter with scroll-state()! → With CSS scroll-state() queries, you can easily manage stuck, snapped, and overflowing elements.

Make your UI smarter with scroll-state()! → With CSS scroll-state() queries, you can easily manage stuck, snapped, and overflowing elements.

Chrome for Developers

61,156 次观看 • 1 年前

`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; }

`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; }

OPM

34,747 次观看 • 6 个月前

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);

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);

jhey ʕ•ᴥ•ʔ

78,350 次观看 • 1 年前

Every site has a story to scroll 📖 With the new Scroll-Triggered Animations, you can transform your site into an immersive narrative that keeps your users engaged. Create beautiful time-based animations with zero JS, all natively in CSS. Break free from static UI and create your story in minutes. #GoogleIO

Every site has a story to scroll 📖 With the new Scroll-Triggered Animations, you can transform your site into an immersive narrative that keeps your users engaged. Create beautiful time-based animations with zero JS, all natively in CSS. Break free from static UI and create your story in minutes. #GoogleIO

Chrome for Developers

12,267 次观看 • 4 个月前

💡 CSS Tip! Get the scroll progress of the page as a CSS variable using a few lines of code ✅ Powered by Scroll driven animations ✅ Defined at the root level ✅ Typed using @property ✅ You can easily use it within any formula CodePen.IO demo in the reply 👇

💡 CSS Tip! Get the scroll progress of the page as a CSS variable using a few lines of code ✅ Powered by Scroll driven animations ✅ Defined at the root level ✅ Typed using @property ✅ You can easily use it within any formula CodePen.IO demo in the reply 👇

CSS by T. Afif

35,659 次观看 • 2 年前

Let’s design a custom scroll indicator using the newly released scroll APIs in iOS 18!

Let’s design a custom scroll indicator using the newly released scroll APIs in iOS 18!

Kavsoft

12,629 次观看 • 1 年前

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;

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;

jhey ʕ•ᴥ•ʔ

213,001 次观看 • 4 个月前