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

【问题标题】：Javascript/CSS - Width shrink ratio defined by scroll heightJavascript/CSS - 由滚动高度定义的宽度收缩率
【发布时间】：2020-04-20 09:03:59
【问题描述】：

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

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

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

好主意！

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

【讨论】：

感谢 Søren 的评论，但问题更像是，如何使徽标仅在卷轴的末端而不是像现在这样完全“折叠”，我认为它更多的js解决方案，我确实看过这个stackoverflow.com/questions/21070882/…，但还没有尝试实现它，，
啊好吧抱歉，误解了你的问题。我认为您链接的解决方案是正确的。