Форум

Bravo · #1 (**permalink**) 17.05.2014, 11:15

Приветствую всех вновь

Стоит задача такого характера, хочу реализовать установку css класса для body при возникновении события scroll для всего окна, но после окончания события класс должен удаляться.

Прокручиваешь страницу в браузере, класс добавился, перестал крутить, класс удалился.

С установкой класса проблем нет, но вот с удалением я завис. Не могу понять, как написать проверку? Как получить информацию о том, что scroll не выполняется?

Не покидает ощущение, что это всё делается как-то просто и я не правильно мыслю

рони · #2 (**permalink**) 17.05.2014, 11:43

Bravo,
при установке класса обнулять таймер на удаление класса - затем устанавливать таймер на удаление класса

Aetae · #3 (**permalink**) 17.05.2014, 11:56

Со стопроцентной точностью - никак.(ибо ты не оракул чтоб предсказать - закончил ли юзер крутить окончательно или прервался на момент

)
Остаётся лишь ставить задержку выбранную условно:

<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 итд.

Bravo · #4 (**permalink**) 18.05.2014, 13:58

Aetae, заменил .style на .className. Работает отлично спасибо вам, но я конечно заранее не подумал о проблемах с анимацией CSS3.

Получается, что время задержки не совпадает со временем анимации. По этой причине анимация резко прерывается и это заметно.

Я это все делаю, чтобы добавиться эффекта падения у элемента (это граф. персонаж). Когда происходит scroll, возникает ощущение, что персонаж сбоку страницы начинает падение, а анимация маятника добавляет ощущение воздушности.

Сижу думаю дальше

Bravo · #5 (**permalink**) 19.05.2014, 11:30

Aetae, интересная проблема, код не срабатывает в Safari с чем это может быть связано?

рони · #6 (**permalink**) 19.05.2014, 12:16

Сообщение от Bravo

код не срабатывает в Safari

Сообщение от Aetae

document.body.onscroll = scroll;

window.onscroll = scroll

Aetae · #7 (**permalink**) 19.05.2014, 13:04

Пример: смотреть в ff/chrome

<body><script>
window.onscroll = function(){/* внезапно */};
alert(document.body.onscroll);
</script></body>

Такие дела.=\

рони · #8 (**permalink**) 19.05.2014, 13:08

Сообщение от Aetae

Пример: смотреть в ff

а что нужно увидеть?

Aetae · #9 (**permalink**) 19.05.2014, 13:23

window.onscroll автоматом ставится и на document.body.onscroll . Просто забавный факт магии.

рони · #10 (**permalink**) 19.05.2014, 14:14

Сообщение от Aetae

window.onscroll автоматом ставится и на document.body.onscroll

ок спасибо за пояснение -- странные дела у меня с алертом иногда пропадает )))

Форум

Справочник

Discord чат

Курсы javascript