正在加载视频...

视频加载失败

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

CSS tip: stop your layout from jumping sideways when the scrollbar appears. html { scrollbar-gutter: stable; } The browser reserves space for the scrollbar ahead of time, so nothing shifts.

Marko Denic

266,651 subscribers

12,938 次观看 • 6 天前 •via X (Twitter)

科学技术教育

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

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

相关视频

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

33,089 次观看 • 2 个月前

This one line of CSS will fix the annoying layout shift that scrollbars cause. This happens when a non-scrollable container becomes scrollable due to its content. This gets rid of that problem: .container { scrollbar-gutter: stable; } With that, space is reserved for the scrollbar before it even appears. So there's no layout shifts when content grows. Use both-edges if your content is centered. It mirrors the reserved space on both sides of the container to keep the layout balanced. If you found this one useful, follow for more. ❤️

This one line of CSS will fix the annoying layout shift that scrollbars cause. This happens when a non-scrollable container becomes scrollable due to its content. This gets rid of that problem: .container { scrollbar-gutter: stable; } With that, space is reserved for the scrollbar before it even appears. So there's no layout shifts when content grows. Use both-edges if your content is centered. It mirrors the reserved space on both sides of the container to keep the layout balanced. If you found this one useful, follow for more. ❤️

Ali

67,744 次观看 • 6 个月前

Tip: prevent scrollbars from re-wrapping text. Using "scrollbar-gutter: stable" fixes this

Tip: prevent scrollbars from re-wrapping text. Using "scrollbar-gutter: stable" fixes this

Florian

169,459 次观看 • 4 个月前

scrollbar-width: thin + extra padding for sheets

scrollbar-width: thin + extra padding for sheets

rauno

25,283 次观看 • 2 个月前

Learn how to create a custom scrollbar.

Learn how to create a custom scrollbar.

Ali Reza

30,201 次观看 • 3 年前

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 ʕ•ᴥ•ʔ

214,677 次观看 • 5 个月前

This guy built a custom scrollbar with section headers for his portfolio 👀

This guy built a custom scrollbar with section headers for his portfolio 👀

Adam KP

46,221 次观看 • 7 个月前

just shipped a curved scrollbar made with Expo react-native-svg and reanimated works on mobile and web grab the code 👇

just shipped a curved scrollbar made with Expo react-native-svg and reanimated works on mobile and web grab the code 👇

rs

30,840 次观看 • 1 年前

the UUID community is so beautiful 🥰 🥰 since launching Every UUID Dot Com I've received PRs with lots of helpful features: * favorites tab (no more scrolling to find your faves!) * vim hotkeys for navigation * better scrollbar on mobile ✨ thanks for the warm welcome!!

the UUID community is so beautiful 🥰 🥰 since launching Every UUID Dot Com I've received PRs with lots of helpful features: * favorites tab (no more scrolling to find your faves!) * vim hotkeys for navigation * better scrollbar on mobile ✨ thanks for the warm welcome!!

nolen

30,675 次观看 • 1 年前

Just taking things too far with this date picker over here Got infinite month scrolling going Kept the scrollbar visible in the video so you can see that the scrolling is actually spoofed (there are only ever 3 calendar grids rendered at a time)

Just taking things too far with this date picker over here Got infinite month scrolling going Kept the scrollbar visible in the video so you can see that the scrolling is actually spoofed (there are only ever 3 calendar grids rendered at a time)

Caleb Porzio ⚡️

10,777 次观看 • 1 年前

I just customized the scrollbar on my latest Framer project using Chat GPT. It took me 3 minutes and I know less about code than a drywall. Totally transformed the feel of my site. Here's a step-by-step of how I did it 👇🏼

I just customized the scrollbar on my latest Framer project using Chat GPT. It took me 3 minutes and I know less about code than a drywall. Totally transformed the feel of my site. Here's a step-by-step of how I did it 👇🏼

Erman Malak

31,326 次观看 • 3 年前

Responsive grid layout using HTML and CSS 🚀

Responsive grid layout using HTML and CSS 🚀

David Mráz

100,843 次观看 • 2 年前

spent way too much time on this scrollbar on my website. - long ticks are months, short ticks are dates - snaps to your cursor - click to jump, drag to scrub - long-press to open a focus ring - satisfying ratchet clicks - touch friendly on mobile go break it

spent way too much time on this scrollbar on my website. - long ticks are months, short ticks are dates - snaps to your cursor - click to jump, drag to scrub - long-press to open a focus ring - satisfying ratchet clicks - touch friendly on mobile go break it

Peng Zheng

93,437 次观看 • 18 天前

Design Engineering Tip Your tooltip doesn’t always end up where you placed it? When it reaches the viewport edge, the browser automatically chooses a fallback position. Anchored Container Queries let your CSS detect that chosen position, so your tooltip can animate from the correct direction. @ container anchored(fallback: flip-block) { .tooltip { animation-name: slide-from-top; } }

Design Engineering Tip Your tooltip doesn’t always end up where you placed it? When it reaches the viewport edge, the browser automatically chooses a fallback position. Anchored Container Queries let your CSS detect that chosen position, so your tooltip can animate from the correct direction. @ container anchored(fallback: flip-block) { .tooltip { animation-name: slide-from-top; } }

Gabriel

12,010 次观看 • 3 个月前

Create this responsive flex layout using just HTML and CSS 🚀

Create this responsive flex layout using just HTML and CSS 🚀

David Mráz

38,100 次观看 • 2 年前

90% of my time is now spent in Do the plan, screenshots come back (via built-in browser) of the implemented feature, and when needed fully built HTML artifacts for multiple edge cases, light/dark mode etc. Feels so nice...

90% of my time is now spent in Do the plan, screenshots come back (via built-in browser) of the implemented feature, and when needed fully built HTML artifacts for multiple edge cases, light/dark mode etc. Feels so nice...

Balint Orosz

19,687 次观看 • 7 个月前

💡 CSS Tip! Do you know that One-Time password field? You can create it using only one input and a few lines of CSS. The HTML: <input type="text" maxlength="6"> Code & Demo: You can control the number of characters by adjusting the maxlength attribute.

💡 CSS Tip! Do you know that One-Time password field? You can create it using only one input and a few lines of CSS. The HTML: <input type="text" maxlength="6"> Code & Demo: You can control the number of characters by adjusting the maxlength attribute.

CSS by T. Afif

25,205 次观看 • 1 年前

🍱 Generador de estructuras HTML y CSS con Flexbox y Grid Layout

🍱 Generador de estructuras HTML y CSS con Flexbox y Grid Layout

Carmen Ansio

107,261 次观看 • 3 年前