Телеграм: @camouf_ru Почта: mihail@bazarow.ru

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

Просмотров: 5615

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

Написать первый комментарий:

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

Записная книжка разработчика

Примерно с 2013-го года пишу заметки по разработке сайтов на Битрикс.
Вы можете задавать уточняющие вопросы в комментариях- отвечаю или дополняю заметки по возможности.

Очистить брошенные корзины с помощью API 1С-Битрикс Просмотров: 367 Задача: в интернет-магазине накапливается большое количество брошенных корзин, нужно их оч... Создание скидки на общую сумму покупки в Битрикс корзине Просмотров: 26960 Функционал интернет-магазина, работающего под управлением 1С Битрикс, позволяет задавать м... Объединить отдельные поля ФИО в одно свойство при оформлении заказа. Просмотров: 877 Пользователь, при оформлении заказа, заполняет три отдельных поля с фамилией, именем и отч... Данные о заказе текущего пользователя Просмотров: 12902 Иногда нужно получить данные о заказе текущего пользователя. Не через компонент, а непосре... Ссылки для добавления и удаления товара из сравнения в Битрикс Просмотров: 8228 Просто оставляю это здесь, вставка ссылок на добавление и удаление товара из сравнения, ес... Информация о заказах и содержимое корзины текущего пользователя. Просмотров: 11776 В процессе разработки сайта могут понадобиться рецепты приведенные ниже. Использовать можн... Подключение jquery из ядра битрикс и объединение своих скриптов в оди... Просмотров: 19743 Если используете большое количество js скриптов на сайте. Например: фансибокс, всяческие г... Дополнительные опции/услуги, добавляемые в корзину, в карточке товаро... Просмотров: 302 Задача: в детальной карточке товара сделать возможность добавления услуги или опции, при д... Вывести имя пользователя добавившего элемент инфоблока в Битрикс Просмотров: 16040 Иногда, необходимо вывести имя пользователя добавившего элемент инфоблока. Например, автор... Отсортировать элементы в Битрикс по свойству привязка к разделам Просмотров: 27917 При создании достаточно сложных интернет-магазинов на Битрикс, иногда встает задача помимо... Сгенерировать скидочные купоны, при заказе и отправить на почту Просмотров: 773 Задача: после того как пользователь сделал заказ, нужно сгенерировать одноразовые купоны д... Вывести свойство отдельно ото всех или исключить из всех Просмотров: 7019 Иногда, на сайте, под управлением 1С-Битрикс, нужно вывести какое-то конкретное свойство о... Настройка прав доступа в 1С-Битрикс Просмотров: 7545 Часто, в интернет-магазине под управлением 1С Битрикс, нужно создать группу пользователей ... Простой WEB сервер на ubuntu, для Битрикс Просмотров: 34478 Расскажу как по быстрому сконфигурировать WEB сервер для работы с Битрикс. Безо всяких ngi... Настройка обмена между 1С:Предприятие и магазином на "1С-Битрикс24: И... Просмотров: 2486 В этой заметке расскажу как настроить синхронизацию между 1С:предприятие и "1С-Битрикс24: ... Вывести общее количество товаров в шаблоне корзины 1С-Битрикс Просмотров: 5720 Задача: вывести общее количество товаров в корзине (именно количество единиц товара, а не ... XML в формате Commerce ML-2, города России и Мира, для выгрузки в инф... Просмотров: 6302 Подвернулась задачка, создать инфоблок для Битрикс, в котором будут просто города России и... Вывести новости из конкретного раздела инфоблока Битрикс Просмотров: 53463 Бывает что требуется вывести конкретные новости или статьи из одного раздела инфоблока в Б... Добавление и удаление из сравнения на AJAX: Битрикс Просмотров: 17698 Рецепт лежал у меня в закромах, почти о нем и забыл, но тут подвернулся под руку- решил оп... Композитный сайт на 1С-Битрикс Просмотров: 3038 Для новых клиентов: Все новые проекты будут включать в себя применение технологии "Компози...