Делаю поэкранный скролл. Для этого есть кнопки при нажатии на которые происходит скролл до определённого якоря Кнопки
<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();
}
}
Но нажатие на кнопку не работает, точнее оно работает, эффект при нажатии есть, но скролла не происходит. Может кто знает почему это и как исправить?