javascript - Javascript/CSS - 由滚动高度定义的宽度收缩率

Question

我有一个有趣的创意编码情况/一个徽标 - 我有一个由大约 130 个其他彩色 div 组成的 div，它们在页面顶部时共同形成徽标，当您滚动页面时，div 会发生变化周围并扭曲徽标，您可以在此处看到它的实际效果： https ://warehouse.netlify.app/和此处的 div 情况：https ://github.com/nejurgis/warehouse/blob/master/src/components/滚动时的DivOverlay.js - 容器 div 的宽度会缩小，并以这种方式推动所有子 div

现在的问题是：有人知道如何根据整个页面的高度缩小容器 div 的宽度，也就是如何使徽标仅在滚动结束时“折叠”而不是像现在这样在中途?

标签： javascriptcssreactjs

Answer 1

好主意！

考虑使用 css 网格https://css-tricks.com/snippets/css/complete-guide-grid/ 使用它，您可以指定网格的列和行，并让所有 div 自动填充每个位置。