Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 09.01.2023, 14:58
Интересующийся
Отправить личное сообщение для dvbshka Посмотреть профиль Найти все сообщения от dvbshka
 
Регистрация: 07.05.2020
Сообщений: 17

рони,
спасибо за совет, буду ковыряться, но чувствую шансов на успех, чуть больше чем 0
Ответить с цитированием
  #12 (permalink)  
Старый 09.01.2023, 15:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

дата сообщения при скролле
dvbshka,
про макет...

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .message {
            height: 100px;
            width: 100%;
            border: 1px solid red;
        }
        .chat_messages {
            height: 300px;
            width: 400px;
        }
        .show_data {
            border: 5px solid #FFFF00;
            height: 40px;
            width: 100px;
            position: fixed;
            opacity: 0;
            transition: .6s;
        }
        .show_data.show {
            opacity: 1;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let timer;
            let div = document.querySelector(".show_data");
            document.addEventListener("scroll", function() {
                window.clearTimeout(timer);
                let lis = document.querySelectorAll(".message");
                let li;
                for (li of lis) {
                    let {
                        top
                    } = li.getBoundingClientRect();
                    if (top > 0) {
                        let date = li.querySelector(".date");
                        let txt = date.getAttribute("message_sent_on");
                        div.textContent = txt;
                        div.classList.add("show");
                        break;
                    }
                }
                timer = window.setTimeout(function() {
                    div.classList.remove("show")
                }, 100)
            })
        })
    </script>
</head>
<body>
    <div class="chat_messages">
        <div class="show_data"></div>
        <ul>
            <li class="message"><span class="date" message_sent_on=1><span></span></span>
            </li>
            <li class="message"><span class="date" message_sent_on=2><span></span></span>
            </li>
            <li class="message"><span class="date" message_sent_on=3><span></span></span>
            </li>
            <li class="message"><span class="date" message_sent_on=4><span></span></span>
            </li>
            <li class="message"><span class="date" message_sent_on=5><span></span></span>
            </li>
            <li class="message"><span class="date" message_sent_on=6><span></span></span>
            </li>
            <li class="message"><span class="date" message_sent_on=7><span></span></span>
            </li>
            <li class="message"><span class="date" message_sent_on=8><span></span></span>
            </li>
            <li class="message"><span class="date" message_sent_on=9><span></span></span>
            </li>
            <li class="message"><span class="date" message_sent_on=10><span></span></span>
            </li>
        </ul>
    </div>
</body>
</html>
Ответить с цитированием
  #13 (permalink)  
Старый 09.01.2023, 16:29
Интересующийся
Отправить личное сообщение для dvbshka Посмотреть профиль Найти все сообщения от dvbshka
 
Регистрация: 07.05.2020
Сообщений: 17

рони,
Спасибо огромное!!! Понял с вашим шаблоном как это должно работать!
Буду пробовать, думаю это именно тот вариант, который мне нужен
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Горизонтальный скролл блоков при вертикальном скролле muhuvovu Элементы интерфейса 1 06.10.2022 14:33
Появление изображения при скролле вниз на 200 пикселей Stas1985 Элементы интерфейса 2 07.10.2020 16:00
Вывод сообщения при наведении на фотографию Turok005 Общие вопросы Javascript 4 24.11.2010 16:28
Вывод сообщения при нажатии MCTrane Общие вопросы Javascript 1 15.01.2010 16:09
Вывод данных единожды, при открытии окна? Ggorsh Events/DOM/Window 1 28.04.2009 01:04