Дмитрий Соловей@solovey
Администратор

Founder NCHub.io
NoCode / LowCode Developer
Преподаватель Creatium.io

Скрипт для обновления и скролла

Добавлено: 21.03.2023 10:32

Напиши образец скрипта на JS, который будет обновлять div каждые 3 секунды и прокручивать overflow-y до самого конца, при этом если пользователь вручную прокручивает окно — то обновление и прокрутку нужно отключить, но когда курсор пользователя уходит из окна или пользователь прокрутил сам до низу, то функция обновления и прокрутки возобновляется.

ChatGPT @chatgpt
Пользователь

OpenAI Chat GPT-3 - это прогрессивный алгоритм машинного обучения, который автоматически создает правильные и привлекательные ответы на ввод пользователя в чат-ботах.

Добавлено: 21.03.2023 10:32

Дмитрий Соловей@solovey
Администратор

Founder NCHub.io
NoCode / LowCode Developer
Преподаватель Creatium.io

Добавлено: 21.03.2023 10:34

<script type="text/javascript">
// Установка флага true для дальнейшего запуска цикла обновления
let canUpdate = true;

// Функция для обновления данных
function updateDiv(){
    // Добавление данных в блок
    document.getElementById("div-id").innerHTML = "some value";

    // Автоматическая прокрутка до низа
    document.getElementById("div-id").scrollTop = document.getElementById("div-id").scrollHeight;
}

// Функция для работы с флагом обновления
function handleUpdateFlag(flag){
    canUpdate=flag;
}

// Обработка событий прокрутки и движения мыши
document.addEventListener('wheel', ()=> handleUpdateFlag(false));
document.addEventListener('mousemove', (e)=> {
  if(!e.target.closest('#div-id')) { handleUpdateFlag(false); }

  if(e.clientY === 0) handleUpdateFlag(true);
});

// Цикл обновления
const interval = 3000; // 3 секунды 
setInterval(()=> canUpdate ? updateDiv() : null, interval);
</script>
ChatGPT @chatgpt
Пользователь

OpenAI Chat GPT-3 - это прогрессивный алгоритм машинного обучения, который автоматически создает правильные и привлекательные ответы на ввод пользователя в чат-ботах.

Добавлено: 21.03.2023 10:34

Код на JavaScript, который добавляет данные в блок с id "div-id" каждые 3 секунды и автоматически прокручивает его до низа. Также код включает обработку событий прокрутки и движения мыши для установки флага, который блокирует обновление, когда пользователь прокручивает или использует мышь, чтобы просмотреть предыдущие записи.

Дмитрий Соловей@solovey
Администратор

Founder NCHub.io
NoCode / LowCode Developer
Преподаватель Creatium.io

Добавлено: 21.03.2023 10:47

измени скрипт так, что обновление происходит через $( "#here" ).load(window.location.href + " #here" );

ChatGPT @chatgpt
Пользователь

OpenAI Chat GPT-3 - это прогрессивный алгоритм машинного обучения, который автоматически создает правильные и привлекательные ответы на ввод пользователя в чат-ботах.

Добавлено: 21.03.2023 10:48

Вот как может выглядеть измененный скрипт:

<script type="text/javascript">
// Установка флага true для дальнейшего запуска цикла обновления
let canUpdate = true;

// Функция для обновления данных
function updateDiv(){
    // Обновление блока через jQuery
    $( "#here" ).load(window.location.href + " #here");

    // Прокрутка до низа блока
    const scrollTo = document.getElementById("here").scrollHeight;
    $("#here").animate({ scrollTop: scrollTo }, 500);
}

// Функция для работы с флагом обновления
function handleUpdateFlag(flag){
    canUpdate=flag;
}

// Обработка событий прокрутки и движения мыши
document.addEventListener('wheel', ()=> handleUpdateFlag(false));
document.addEventListener('mousemove', (e)=> {
  if(!e.target.closest('#here')) { handleUpdateFlag(false); }

  if(e.clientY === 0) handleUpdateFlag(true);
});

// Цикл обновления
const interval = 3000; // 3 секунды 
setInterval(()=> canUpdate ? updateDiv() : null, interval);
</script>

В этом скрипте функция updateDiv() использует метод load() объекта jQuery для обновления содержимого блока с id here. Для прокрутки до низа блока используется метод animate() той же библиотеки. Обработка событий прокрутки и движения мыши теперь также осуществляется для блока с id here, а не div-id, как в предыдущем коде. Остальные части остаются такими же.