Добавить событие при сролле

[Ubivectel]

Привет мир!

Сделал блок смайкиков, почти содрал с ВК

вот верстка:

<span class="smile-m">
   картинка (кнопка)
</span>
<div class="smiles-modal">
    <div class="smile-overlay">
        <div class="tab-b" style="display: block;">
            коды смайлов
        <div class="tab-b">
            еще коды
        </div>
        <div class="tab-b">
            и это коды
        </div>
        <div class="tab-b">
            последняя вкладка
        </div>
        <div class="tabs-header">
            <span class="tab-h actives" data-tab="0"></span>
            <span class="tab-h" data-tab="1"></span>
            <span class="tab-h" data-tab="2"></span>
            <span class="tab-h" data-tab="3"></span>
        </div>
    </div>

переключает табы вот такая функция:

window.onload = function() {
        document.querySelector('.tabs-header').addEventListener('click', ftabs);

        function ftabs(event) {
            if (event.target.className == 'tab-h') {
                let dataTab = event.target.getAttribute('data-tab');
                let tabH = document.getElementsByClassName('tab-h');
                for (let i = 0; i < tabH.length; i++) {
                    tabH[i].classList.remove('actives');
                }
                event.target.classList.add('actives')
                let tabBody = document.getElementsByClassName('tab-b');
                for (let i = 0; i < tabBody.length; i++) {
                    if (dataTab == i) {
                        tabBody[i].style.display = 'block';
                    } else {
                        tabBody[i].style.display = 'none';
                    }
                }
            }
        }
    }

Для полного счастья не хватает только, что бы переход по вкладкам происходил так же при скролле до низа блока, и соответственно переход на предыдущий блок при скролле верх. Пока даже не знаю как начать думать )

[рони]

Ubivectel,
сделайте не скрытие блоков, а прокрутку к началу блока.

[Ubivectel]

Попробовал вот такой скрипт

$("#tab-1").click(function() { // ID откуда кливаем
        $('html, body').animate({
            scrollTop: $(".tab-1").offset().top // класс объекта к которому приезжаем
        }, 1000); // Скорость прокрутки
    });

Но он прокручивает всю страницу, да и на каждую вкладку отдельный код... Не пойму пока как сделать

[рони]

Ubivectel,
https://javascript.ru/forum/misc/826...tml#post537588

[Ubivectel]

После долгих мучений сочинил вот такое:

<span class="smile-m">
   кнопка
</span>
<div class="smiles-modal">
    <div class="smile-overlay">
    <div class="height" style="height: 350px;overflow: auto;">
        <div class="tab-b" id="tab-0" style="display: block;">
        смайлы
        </div>
        <div class="tab-b" id="tab-1">
        смайлы
        </div>
        <div class="tab-b" id="tab-2">
        смайлы
        </div>
        <div class="tab-b" id="tab-3">
        смайлы
                </div>
        </div>
        <div class="tabs-header">
            <a href="#tab-0" class="tab-h actives" data-tab="0"></a>
            <a href="#tab-1" class="tab-h" data-tab="1"></a>
            <a href="#tab-2" class="tab-h" data-tab="2"></a>
            <a href="#tab-3" class="tab-h" data-tab="3"></a>
        </div>
    </div>
    <script>
    window.onload = function() {
        document.querySelector('.tabs-header').addEventListener('click', ftabs);

        function ftabs(event) {
            if (event.target.className == 'tab-h') {
                let dataTab = event.target.getAttribute('data-tab');
                let tabH = document.getElementsByClassName('tab-h');
                for (let i = 0; i < tabH.length; i++) {
                    tabH[i].classList.remove('actives');
                }
                event.target.classList.add('actives')
                let tabBody = document.getElementsByClassName('tab-b');
                // for (let i = 0; i < tabBody.length; i++) {
            }
        }
    }

    document.querySelectorAll('a[data-tab^="#"').forEach(link => {
    link.addEventListener('click', function(e) {
    e.preventDefault();

    let href = this.getAttribute('data-tab').substring(1);

    const scrollTarget = document.getElementById(data-tab);

    // const topOffset = document.querySelector('.scrollto').offsetHeight;
    const topOffset = 0; // если не нужен отступ сверху 
    // const elementPosition = scrollTarget.getBoundingClientRect().top;
    const offsetPosition = elementPosition - topOffset;

    window.scrollBy({
        top: offsetPosition,
        behavior: 'smooth'
    });
});
});
    </script>

Оно работает, но при переключении табов "дергается" вся страница, если я правильно понимаю элемент

<span class="smile-m">
   кнопка
</span>

выравнивается на странице по вертикали, и к табам:

<a href="#tab-0" class="tab-h actives" data-tab="0"></a>
            <a href="#tab-1" class="tab-h" data-tab="1"></a>
            <a href="#tab-2" class="tab-h" data-tab="2"></a>
            <a href="#tab-3" class="tab-h" data-tab="3"></a>

класс actives добавляется при клике, очень бы хотелось что бы он добавлялся при ручной прокрутке к соответствующему блоку. вот как оно сейчас: https://noviy-kovcheg.ru/smoking

[рони]

"дергается" вся страница

попробуйте добавить
event.preventDefault(); строка 31