Простенький 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;
