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

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

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

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

Получится примерно так:

В общем элементарная верстка.

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

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

<script type="text/javascript"> 
function scrol(){ 
  elem=document.getElementById('newsscroll'); 
  elem.scrollTop=elem.scrollTop+1; 
  if (elem.scrollTop >= (elem.scrollHeight - elem.clientHeight)) { 
    elem.scrollTop = 0; 
    return; 
  } 
} 
setInterval(scrol,50); 
</script>

Небольшие пояснения:

• getElementById('newsscroll'); - обязательно, к блоку для которого задан overflow-y:scroll; задать это id или переименовать в скрипте под свой
• elem.scrollTop+1; - смещение автоскроллинга, можно сделать больше но для плавности прокрутки лучше 1px
• setInterval(scrol,50); - время задержки авто скролинга на 1px, 50 немного прерывисто, но не мешает. Можно установить еще меньше, будет совсем плавно

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

Автопрокрутка overflow:scroll с задержкой

Если стоит задача: сделать автопрокрутку спустя не большую паузу, например через 10 секунд после открытия страницы, можно обвернуть скрипт в SetTimeout

<script type="text/javascript"> 
setTimeout (function (){
  function scrol(){ 
  elem=document.getElementById('newsscroll'); 
  elem.scrollTop=elem.scrollTop+1; 
    if (elem.scrollTop >= (elem.scrollHeight - elem.clientHeight)) { 
      elem.scrollTop = 0; 
      return; 
    } 
  } 
  setInterval(scrol,50);
}, 10000); //Время паузы до выполнения авто сролла
</script>

Дмитрий 05.12.2023

А возможно так же только горизонтальный интересует  

Михаил Базаров 05.12.2023

Заметка немного устарела, работать будет - но написана лет этак 8 назад, теперь можно сделать лучше.  
В выходные ее "перенапишу" ну и добавлю вариант с горизонтальным скролом