How to set a certain amount of CSS overflow
source link: https://geoffgraham.me/how-to-set-a-certain-amount-of-css-overflow/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
How to set a certain amount of CSS overflow
Because
overflow: hiddencreates a scroll container it can interfere with the Scroll-Driven Animations scroller lookup mechanism. The fix is to useoverflow: clipinstead.
That’s the problem and the solution in a nice’n’tidy explanation. I was aware of overflow: clip but it was this little blurb that make my ears perk up:
Additionally, using
overflow: clipalso allows you to useoverflow-clip-marginto determine how far outside its bounds an element may be painted.
New to me! I also learned that the property clips the visual box at the padding-box. We can set a second value specifying exactly which box to clip:
overflow-clip-margin: content-box 3rem;I’m not sure why I have a habit of using overflow: hidden over clip. Must be decades-old muscle memory that I never thought to revisit. But now I think I’ll reach for clip from here on out; it’s the same outcome as hidden but, to Bramus’s point, it doesn’t interfere with Scroll-Driven Animations. Plus, we gain more flexibility to set the boundaries.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK