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

Зарегистрироваться Войти
Напомнить пароль

Быстрая регистрация через соц.сеть:
Случайные заметки из блога
Табы из свойств инфоблока в Битрикс

Думаю все знают что такое табы или вкладки. Расскажу как на ...

Подключение SSL на Битрикс виртуальная машина

Для некоторых сервисов, типа Яндекс Касса, требуется наличие...

Дополнительные картинки в списке элементов каталога битрикс

Очень редко, но бывают ситуации, когда надо вывести дополнительные...

Умный фильтр на главной странице Битрикс

Достаточно редкая но востребованная задачка- это вывести компонент...

Время на БД и веб сервере отличается на 3600 секунд, тест Битрикс

Достаточно часто, при проверке параметров системы, в Битрикс,...

Ускорение сайта Битрикс на ubuntu server, Memcached.

До сегодняшнего дня арендовал виртуальный сервер в Германии ...

Свежие комментарии в блоге
Самодельная форма добавления элемента на API Битрикс

Здравствуйте! А вот вопрос как пользователю в месте с элементом создать раздел в котором он будет на...

25.07.2017 / Александр Иванов
Очистка корзины битрикс одним нажатием

[url=/blog-note/1412/]Очистка корзины битрикс одним нажатием[/url] В стандартной корзине Битрикс...

24.07.2017 / Михаил Базаров
Материалы по теме в новостях Битрикс, с картинкой, названием и текстом анонса.

[QUOTE][USER=1631]Интересующийся многим[/USER] пишет: Михаил, добрый день! что-то ссылка [url]http...

22.07.2017 / Михаил Базаров
Всплывающее окно с формой обратной связи Битрикс

Подскажите почему может не работать скрипт  BX.ajax.onload_943827 = function() {           setTime...

19.07.2017 / Рима Уколова
Вывести товары из того же раздела в карточке товара

Михаил, скажите пожалуйста, этот метод еще актуален? Никак не могу передать ни id ни символьный код,...

19.07.2017 / Алексей Сель

© 2011—2017 Частный вебмастер: ИП Базаров, ОГРНИП: 315784700173692. Работает на 1С-Битрикс.

Копирование материалов запрещено: "ГК РФ, часть 4, раздел VII: Права на результаты интеллектуальной деятельности".

Информация размещенная на сайте, не является публичной офертой.
Политика конфеденциальности

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

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