: целевой псевдо-селектор не выбирает цель - PullRequest
Новая
       13

: целевой псевдо-селектор не выбирает цель

0 голосов
/ 26 февраля 2019

Простите, если кто-то написал о той же проблеме, я не смог найти похожую проблему с ответом.

Когда я нажимаю на кнопку с URL-адресом #dotNetComponents, он переводит меня в div сидентификатор dotNetComponents, но заходит слишком далеко, обрезая заголовок и часть текста.Я полагаю, что причина в моем липком заголовке, но я не уверен на 100% в этом.В любом случае мне нужно добавить буфер в верхнюю часть цели, чтобы ни один из элементов div не обрезался.После поиска я нашел css ниже, похоже, он должен работать правильно.Когда я изменил css с: target на: hover, я смог увидеть, как страница активно вносит изменения при наведении курсора на 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;
 }

1 Ответ

0 голосов
/ 26 февраля 2019

CSS Scrolling

Если вы используете ссылку только для навигации по странице, :target не требуется и ::before.

В следующей демонстрации:

  • Блочный элемент обернут вокруг целевого элемента (например, <article>)

  • В упомянутом ранее элементе есть эти обязательные элементыproperties:

Распространенная проблема при прокрутке ссылки состоит в том, что целевой элемент может быть слишком близко к ссылке - обратите внимание, что целевые элементы имеют 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>
...