Работа с css классом элемента при scroll
Приветствую всех вновь :)
Стоит задача такого характера, хочу реализовать установку css класса для body при возникновении события scroll для всего окна, но после окончания события класс должен удаляться. Прокручиваешь страницу в браузере, класс добавился, перестал крутить, класс удалился. С установкой класса проблем нет, но вот с удалением я завис. Не могу понять, как написать проверку? Как получить информацию о том, что scroll не выполняется? Не покидает ощущение, что это всё делается как-то просто и я не правильно мыслю :-E |
Bravo,
при установке класса обнулять таймер на удаление класса - затем устанавливать таймер на удаление класса |
Со стопроцентной точностью - никак.(ибо ты не оракул чтоб предсказать - закончил ли юзер крутить окончательно или прервался на момент:))
Остаётся лишь ставить задержку выбранную условно:
<div style="height:2500px"></div>
<script>
function setBg(color){
document.body.style.backgroundColor = color || '';
}
function scroll(){
if(scroll.scrolling){
clearTimeout(scroll.timer);
} else {
setBg('red');
scroll.scrolling = true;
}
scroll.timer = setTimeout(scrollStop, 200);
}
function scrollStop(){
setBg();
scroll.scrolling = false;
}
document.body.onscroll = scroll;
</script>
Можно усложнить привязываясь к mouseup/down итд. |
Aetae, заменил .style на .className. Работает отлично спасибо вам, но я конечно заранее не подумал о проблемах с анимацией CSS3.
Получается, что время задержки не совпадает со временем анимации. По этой причине анимация резко прерывается и это заметно. Я это все делаю, чтобы добавиться эффекта падения у элемента (это граф. персонаж). Когда происходит scroll, возникает ощущение, что персонаж сбоку страницы начинает падение, а анимация маятника добавляет ощущение воздушности. Сижу думаю дальше :write: |
Aetae, интересная проблема, код не срабатывает в Safari с чем это может быть связано?
|
Цитата:
Цитата:
window.onscroll = scroll |
Пример: смотреть в ff/chrome
<body><script>
window.onscroll = function(){/* внезапно */};
alert(document.body.onscroll);
</script></body>
Такие дела.=\ |
Цитата:
|
window.onscroll автоматом ставится и на document.body.onscroll . Просто забавный факт магии.
|
Цитата:
|
| Часовой пояс GMT +3, время: 08:07. |