CSS滚动

Question

如果有人发布了相同的问题，请原谅我，我无法找到答案的相似问题。

当我单击带有#dotNetComponents url的按钮时，它将带我进入具有dotNetComponents ID的div，但走得太远了，切断了标题和一些文本。我相信原因是因为我的标头很粘，但是我对此不是100％肯定。无论如何，我需要在目标的顶部添加一个缓冲区，以便所有div都不会中断。搜索后，我发现下面的css，似乎应该正常工作。当我将CSS从：target更改为：hover时，我可以看到页面在将鼠标悬停在具有ID的div上时正在积极地进行更改。因此，问题出在：target选择器本身之内。请帮忙。

这是我的html的简化版本：

<a href="#dotNetComponents" class="btn transformBtn">.NET COMPONENTS</a>

<div id="dotNetComponents" class="interiorContent container offsetAnchor">
</div>

这是CSS：

 #dotNetComponents:target::before { 
   display: block; 
   content: " "; 
   margin-top: -110px;
   height: 110px; 
   visibility: hidden; 
   pointer-events: none;
 }

Answer 1

CSS滚动

如果您仅使用链接来浏览页面:target，也不需要::before。

在以下演示中：

将块元素包裹在目标元素周围（例如<article>）
前面提到的元素具有以下必需属性：

从链接滚动时的一个常见问题是目标元素可能太靠近链接了-请注意，目标元素的速度为100vh margin-top/bottom。边距的大小由您决定，但我建议使用将目标推离屏幕的边距。另外，如果目标元素位于页面的底部，它将仅向上滚动至margin-bottom或父元素padding-bottom。

overflow-y: scroll; /* Adds a persistent vertical scrollbar */
scroll-behavior: smooth; /* Animates scrolling */
height: 150px; /* This varies as long as it's a fixed height. */

演示

nav a {
  font-size: 15vh;
  width: 30%;
  display: inline-block;
  text-align: center
}

article {
  overflow-y: scroll;
  scroll-behavior: smooth;
  height: 150px;
}

section {
  margin: 100vh auto;
  height: 110px;
  line-height: 110px;
  border: 3px solid #000;
  font-size: 15vh;
  text-align: center;
}

<nav>
  <a href="#A">A</a>

  <a href="#B">B</a>

  <a href="#C">C</a>
</nav>
<article>
  <section id="A">A</section>
  <section id="B">B</section>
  <section id="C">C</section>
</article>

：target伪选择器未选择目标

1 个答案:

CSS滚动

演示