Простенький 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>Написать первый комментарий: