0

Делаю поэкранный скролл. Для этого есть кнопки при нажатии на которые происходит скролл до определённого якоря Кнопки

<button class="scrollbar_item scrollbar_item-1" href="#head1" onclick="toggleActiveClass(event)"></button>
<button class="scrollbar_item scrollbar_item-2" href="#head2" onclick="toggleActiveClass(event)"></button>
<button class="scrollbar_item scrollbar_item-3" href="#head3" onclick="toggleActiveClass(event)"></button>
<button class="scrollbar_item scrollbar_item-4" href="#head4" onclick="toggleActiveClass(event)"></button>
<button class="scrollbar_item scrollbar_item-5" href="#head5" onclick="toggleActiveClass(event)"></button>

Якоря

<div class="" id="head1" style="height: 100vh; width: 500px;"></div>
<div class="" id="head2" style="height: 100vh; width: 500px;"></div>
<div class="" id="head3" style="height: 100vh; width: 500px;"></div>
<div class="" id="head4" style="height: 100vh; width: 500px;"></div>
<div class="" id="head5" style="height: 100vh; width: 500px;"></div>

Так же есть идея сделать нажатие на эти кнопки при прокрутке над этими якорями на несколько пикселей, реализовано следующим образом:

let head1 = document.querySelector('#head1')

let scrollbar_item_2 = document.querySelector('.scrollbar_item-2');

  head1.onwheel = function(event){

    if(event.deltaY > 0){

      scrollbar_item_2_button.click();
    }
}

Но нажатие на кнопку не работает, точнее оно работает, эффект при нажатии есть, но скролла не происходит. Может кто знает почему это и как исправить?

1
  • scrollbar_item_2_button - а это что такое? 5 июл в 4:58

1 ответ 1

0
  1. Вместо button использовать тег a
  2. https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

Пример

:root {
  --navbar-height: 60px;
}

html {
  scroll-behavior: smooth; /* https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior */
}

body {
  margin: 0;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  min-height: var(--navbar-height);
  gap: 1rem;
  position: sticky;
  top: 0;
  left: 0;
}

.navbar a {
  color: #fff;
}

section {
  scroll-margin-block: var(--navbar-height); /* https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-block */
  min-height: 100vh;
  padding: 2rem 1rem;
}

section:nth-child(even) {
  background-color: #ccc;
}
<nav class="navbar">
  <a href="#head1">Button 1</a>
  <a href="#head2">Button 2</a>
  <a href="#head3">Button 3</a>
  <a href="#head4">Button 4</a>
  <a href="#head5">Button 5</a>
</nav>

<section id="head1">Head 1</section>
<section id="head2">Head 2</section>
<section id="head3">Head 3</section>
<section id="head4">Head 4</section>
<section id="head5">Head 5</section>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.