Список новостей с автопрокруткой через overflow:scroll

Простенький javascript позволит сделать автопрокрутку в шаблоне списка новостей. Достаточно актуально для новостных сайтов или при достаточно большом количестве новостей. Для начала просто выводим компонент список новостей, упаковываем его в div с overflow:scroll и добавляем javascript

Список новостей.

Для начала выводим компонент списка новостей в нужное место сайта и копируем шаблон компонента. Верстаем шаблон так, что бы не все новости влезали в заданную высоту, и скрываем лишние (не вместившиеся) через css overflow-y: scroll;

В своем примере я спрятал скролл-бар с помощью стилей. Получится примерно так:

Что бы спрятать скролл-бар использовал такой сss, при желании можете задать ему ширину как-то красиво стилизовать.

.autoscroll_news::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
.autoscroll_news::-webkit-scrollbar-thumb { /* плашка-бегунок */
  background: #fff;
}
.autoscroll_news::-webkit-scrollbar-track { /* фон */
  background: #fff;
}

Добавление автоскрола к overflow:scroll

Теперь сделаем, так что бы этот блок скролился автоматически. Для этого добавляем в шаблон списка новостей или во внешний подключаемый файл javasсript

document.addEventListener("DOMContentLoaded", function() {
    // Подождем 5 секунд перед началом автоскролла
    setTimeout(function() {
        startAutoScroll();
    }, 5000);
});

function startAutoScroll() {
    var container = document.querySelector('.autoscroll_news');

    // Высчитываем высоту контейнера
    var containerHeight = container.scrollHeight;

    // Задаем скорость автоскролла
    var scrollSpeed = 20;

    // Задаем интервал между кадрами (меньше — плавнее, но требуется больше ресурсов)
    var scrollInterval = 16;

    // Вычисляем расстояние, которое нужно проскроллить за одну итерацию
    var scrollDistance = 1;

    // Запускаем интервал
    var scrollIntervalId = setInterval(function() {
        container.scrollTop += scrollDistance;

        // Если достигнут конец контейнера, перематываем в начало
        if (container.scrollTop + container.clientHeight >= containerHeight) {
            container.scrollTop = 0;
        }
    }, scrollInterval);

    // Добавляем обработчик события, чтобы при наведении мышью на контейнер, скролл приостанавливался
    container.addEventListener('mouseenter', function() {
        clearInterval(scrollIntervalId);
    });

    // Добавляем обработчик события, чтобы при уходе мыши скролл возобновлялся
    container.addEventListener('mouseleave', function() {
        scrollIntervalId = setInterval(function() {
            container.scrollTop += scrollDistance;
            if (container.scrollTop + container.clientHeight >= containerHeight) {
                container.scrollTop = 0;
            }
        }, scrollInterval);
    });
}

Этот код создает плавный автоскролл в блоке с классом autoscroll_news через 5 секунд после загрузки страницы. Вы можете настроить параметры скорости, интервала и другие настройки в соответствии с вашими предпочтениями. Весь пример кода прокомментирован, подгоняйте настройки под себя.

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

По ссылке можно скачать готовый шаблон с этим примером, для списка новостей:
news.list с автоскроллом

Горизонтальный автоскролл элементов

Для горизонтального автоскролла нужно просто изменить направление скролла на горизонтальное и использовать свойство scrollLeft вместо scrollTop.

document.addEventListener("DOMContentLoaded", function () {
    // Подождем 5 секунд перед началом горизонтального автоскролла
    setTimeout(function () {
        startHorizontalAutoScroll();
    }, 5000);
});

function startHorizontalAutoScroll() {
    var container = document.querySelector('.autoscroll_news');

    // Высчитываем ширину контейнера
    var containerWidth = container.scrollWidth;

    // Задаем скорость горизонтального автоскролла
    var scrollSpeed = 5;

    // Задаем интервал между кадрами (меньше — плавнее, но требуется больше ресурсов)
    var scrollInterval = 16;

    // Вычисляем расстояние, которое нужно проскроллить за одну итерацию
    var scrollDistance = 1;

    // Запускаем интервал
    var scrollIntervalId = setInterval(function () {
        container.scrollLeft += scrollDistance;

        // Если достигнут конец контейнера, перематываем в начало
        if (container.scrollLeft + container.clientWidth >= containerWidth) {
            container.scrollLeft = 0;
        }
    }, scrollInterval);

    // Добавляем обработчик события, чтобы при наведении мышью на контейнер, скролл приостанавливался
    container.addEventListener('mouseenter', function () {
        clearInterval(scrollIntervalId);
    });

    // Добавляем обработчик события, чтобы при уходе мыши скролл возобновлялся
    container.addEventListener('mouseleave', function () {
        scrollIntervalId = setInterval(function () {
            container.scrollLeft += scrollDistance;
            if (container.scrollLeft + container.clientWidth >= containerWidth) {
                container.scrollLeft = 0;
            }
        }, scrollInterval);
    });
}

Этот код обеспечивает горизонтальный автоскролл в блоке с классом autoscroll_news через 5 секунд после загрузки страницы. Аналогично предыдущему примеру, вы можете настроить параметры скорости, интервала и другие настройки по своему усмотрению. Не забудте сделать так что бы не все новости помещались по ширине блока и прятались с помощью overflow-x: scroll;