如何在扩展面板中使用滚动查看

Posted 2023-05-07

【中文标题】如何在扩展面板中使用滚动查看

【英文标题】：How to use scroll to view within expansion panel

【发布时间】：2021-06-03 08:21:36

【问题描述】：

上下文： 我正在努力实现这一目标--> https://hhk6r.csb.app/

模拟：

问题：

在 div 元素上滚动查看不会滚动到展开面板的开头。

文档：https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

我尝试使用文档中提供的 block:'start' 选项，但无法弄清楚我哪里出错了，任何建议都会有所帮助。

我已经创建了代码框来复制这个问题，这是我到目前为止所尝试的。

https://codesandbox.io/s/scroll-issue-kyoxf

【问题讨论】：

尝试在所有扩展面板的父级（div）上使用滚动边距顶部）。 codesandbox.io/s/scroll-issue-forked-4q91s?file=/src/App.vue

哦，我的错。这个是在一些普通行为的情况下使用的，比如href="div#my-section-1"。在这里，您似乎还有其他行为，尝试使用 JS 复制一些向下滚动或切换到 href 锚点可能是一种解决方案。

【参考方案1】：

在你目前的工作之上，你可以用

适当地抵消整个事情

scroll-margin-top: 2rem;

所有荣誉都归功于 Josh Comeau 和他的精彩推文，可以在这里找到：https://twitter.com/joshwcomeau/status/1332015868725891076?lang=en

【参考方案2】：

一个简单的技巧是使用 scroll-margin-top 正确偏移页边距