Показать сообщение отдельно
  #1 (permalink)  
Старый 24.04.2022, 04:35
Профессор
Отправить личное сообщение для Ubivectel Посмотреть профиль Найти все сообщения от Ubivectel
 
Регистрация: 01.12.2020
Сообщений: 166

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

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

вот верстка:

<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';
                    }
                }
            }
        }
    }



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