Question

我最近发现页面内锚点使用overflow: hidden滚动到元素的边缘。

请参阅此处-滚动到底部，查看被溢出切断的项目。滚动回到顶部，然后单击锚点。它跳下超过最低点的底部。然后尝试滚动到页面顶部；您无法执行此操作，因为页面的锚点/顶部已被剪掉。

body {
  background: white;
}

.page {
  overflow: hidden;
}

.content {
  padding-top: 200vh; /* just to create scroll */
  background: rgba(255,0,0,0.3);
  position: relative;
}

.target {
  position: absolute;
  top: 95%;
  left: 0;
  width: 100px;
  height: 100px;
  background: yellow;
}

<div class="page">
  <div id="top"><a href="#anchor">Jump to target</a></div>
  <div class="content">        
    <div class="target" id="anchor"><a href="#top">Target</a></div>
  </div>
</div>

两个问题：

1）为什么要这样做？这是错误/怪癖，还是预期的行为？例如。溢出是隐藏的，但仍可滚动。

2）有什么办法可以防止这种情况？

Answer 1

只需将目标类别top: 95%;更改为bottom: 0;

更改后：

在CSS

body {
  background: white;
}

.page {
  overflow: hidden;
}

.content {
  padding-top: 200vh;
  background: rgba(255, 0, 0, 0.3);
  position: relative;
}

.target {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background: yellow;
}

<div class="page">
  <div id="top"><a href="#anchor">Jump to target</a></div>
  <div class="content">
    <div class="target" id="anchor"><a href="#top">Target</a></div>
  </div>
</div>

锚链接滚动到隐藏的溢出内容中

1 个答案: