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

1911  |  0

Простенький 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>
Расскажи друзьям-то:
Еще в записках:
Уважаемый читатель! В связи с участившимся спамом в комментариях, возможность писать доступна только для зарегистрированных пользователей
Зарегистрироваться Войти Напомнить пароль

© 2011—2017 Частный вебмастер: ИП Базаров, ОГРНИП: 315784700173692. Работает на 1С-Битрикс.
Копирование материалов запрещено: "ГК РФ, часть 4, раздел VII: Права на результаты интеллектуальной деятельности".

Информация размещенная на сайте, не является публичной офертой. Политика конфеденциальности
x
Как к Вам обращаться? *
Ваша электронная почта: *
Доп. материалы (логотип, тех. задание):
 
Обзор
Текст сообщения:


Нажимая на кнопку "Отправить", Вы соглашаетесь на обработку Ваших персональных данных согласно политике конфеденциальности. Ознакомиться с которой, можно в нижнем правом углу сайта