Про событие wheel забыл. Спасибо, что напомнили. Вот такой код получился:
<!doctype html>
<html lang="ru">
<head>
<style type="text/css">
.animation-div{
height: 600px;
background-color: #ffff00;
}
.orange{
background-color: orange;
}
.red{
background-color: red;
}
</style>
</head>
<body>
<div style="height: 400px; background-color: ghostwhite"></div>
<div class="animation-div">
Див где будет происходить анимация. <a href="#">Ссылка</a>
</div>
<div style="height: 400px; background-color: ghostwhite"></div>
<script type="text/javascript">
var totalWheel = 0,
animationDiv = document.getElementsByClassName('animation-div')[0]
window.onwheel = function(e){
var delta = e.deltaY;
totalWheel += delta // Сколько всего прокрутили
if(totalWheel > 400 && totalWheel < 700){
window.onscroll = function(e) {
window.scrollTo(0, 400)
}
if(totalWheel > 400 && totalWheel < 500) animationDiv.className = 'animation-div';
if(totalWheel > 500 && totalWheel < 600) animationDiv.className = 'animation-div orange';
if(totalWheel > 600 && totalWheel < 700) animationDiv.className = 'animation-div red';
}else{
window.onscroll = null; // Обнуление предыдущего обработчика события onscroll
}
}
</script>
</body>
</html>
Почему-то событие scroll нельзя отменить. Этот код не работает:
window.onscroll = function(e) {
e.preventDefault()
}
Поэтому я прокручивал страницу до определенного значения:
window.onscroll = function(e) {
window.scrollTo(0, 400)
}