CSS Grid 使页面自动滚动

Question

我一直在论坛上寻找对此的解决方案，我能找到的最接近的东西是this。但好像没有解决办法。

我有一个 CSS 网格，它是

grid-template-columns: repeat(auto-fill,minmax(70px,1fr));

，其父元素有一个

max-height: 350px; overflow-y: auto;

。当我“选择”网格中的项目时，一切正常，直到我向下滚动足够远并选择一个项目，然后它会向下滚动整个页面。检查元素，网格中的项目似乎继续滚动到页面顶部（当然从视图中隐藏），但是一旦这些项目到达页面顶部，它就会自动滚动整个页面。

我尝试在这里制作一个工作演示，但它没有复制，不确定这是否是因为它位于 Iframe 中？这是我正在处理的内容的链接：https://fathomless-brook-11892.herokuapp.com/product/64e6566b3ec4190ccdecb5ba

如果您检查它，并在 CSS 中找到“*”并取消选中

max-height: -webkit-fill-available;

，然后开始向下滚动并选择不同的面料。您会注意到页面突然向下滚动。有了这个似乎是我可以让它按预期工作的唯一方法。但我相信这是错误的做法？

非常感谢任何帮助！

Answer 1

不太确定它为什么起作用，但将“Body”设置为

position: fixed;

似乎可以解决问题。它的工作原理类似于

max-height: -webkit-fill-available;

，但现在当我将其嵌入到其他地方时，它现在可以按预期工作。

Answer 2

我复制了你的问题，但无法找出问题所在。据我所知，您的脚本的一部分可能正在尝试手动向下滚动到该位置。

• 您应该尝试通过检查单击该项目时发生的情况来调试它，方法是检查使用

  onclick

  或

  onchange

  调用哪些函数，以查看是否有某些内容正在更改滚动位置
• 或者如果由于某种原因你不能这样做（也许是因为第三个原因） 派对脚本），你还有一些其他肮脏的选项来覆盖它。您始终可以使用 scrollIntoView() 滚动回视图，也许就像带有选项的

  element.scrollIntoView({ behavior: "instant"})

  一样。或者，您可以在单击操作之前保存 scrollY（如

  var scrollTop = window.scrollY;

  ），并在 scrollTo() 中使用它（如

  window.scrollTo(0, scrollTop);

  ）以返回到该确切位置。

无论哪种方式，这对我来说都不像 CSS 或浏览器错误。可能是一些 javascript 代码造成了这个。