锚点无法使用溢出隐藏 [Microsoft Edge]答案

【问题标题】：Anchor not working with overflow hidden [Microsoft Edge]锚点无法使用溢出隐藏 [Microsoft Edge]
【发布时间】：2019-04-20 19:41:22
【问题描述】：

Edge 可能不想滚动到不可见的东西上。如果锚元素在其父尺寸之外且溢出：隐藏，Edge 浏览器将不会滚动到该位置。

.box {
  width: 100%;
  height: 100vh;
}

.first {
  background-color: red;
}

.second {
    background-color: blue;
    position: relative;
    overflow: hidden;
}

#anchor {
  position: absolute;
  top: -20px; /* if you change back to 0, anchor will work */
  left: 0;
  width: 20px;
  height: 20px;
  background-color: yellow;
}

<div class="box first">
  <a href="#anchor">GO TO ANCHOR IN SECOND SECTION</a>
</div>

<div class="box second">
  <div id="anchor"></div>
</div>

我需要一个位于其父级之外的锚点，该锚点具有溢出：隐藏，而 href 仍在锚点上滚动。

它在 Chrome 和 Firefox 上运行良好。边缘版本：44.17763.1.0

【问题讨论】：

标签： html css overflow microsoft-edge

【解决方案1】：

这很奇怪，我无法告诉你 Edge 为何这样做。但是，您的示例的快速解决方法是通过添加

来呈现一行不可见像素

 border-bottom: 1px solid transparent; /* this will overlap the parent element */
 background-clip: content-box; /* bg is not painted under border */

看到它working here。如您所见，Edge 也在发挥作用。

【讨论】：

好主意！但是您仍然无法达到与 Chrome 或 Firefox 相同的行为。因为为了让它起作用，你必须为高度和顶部属性提供相同的锚点。这导致只能在锚父的开头滚动，但不能在父父之前滚动例如 60 像素。如果您有 60 像素导航并且需要在元素之前滚动 60 像素，则会出现问题：/
刚刚注意到当我删除高度时它在您的示例中工作正常，但在我更复杂的代码中它不起作用。
这至少值得商榷，我的印象是 Edge 做得对。如果父级有overflow: hidden，则意味着它内部发生的一切都保留在它内部。因此，您尝试滚动到的点在文档空间中不存在，因为它位于带有overflow:hidden 的元素之外。解决此问题的正确方法是将锚点放在父项的可见空间内，而不是在其外部，并为父项提供与锚点高度相等的负上边距。恕我直言，这将适用于跨浏览器，并且是正确的方法。
一方面我同意，另一方面 - 我不认为将第 2 节的锚点放在第 1 节的好方法。这有点令人困惑。