addEventListener не срабатывает?
 

Привет уважаемые форумчане.

Есть лендинг из 3-х страниц.

при скролле создается эффект one-page-scroll

ну и я создал скрипт, который в зависимости от текущей страницы присваивает классы элементам для анимации. Вот код:

<script type="text/javascript">
	function init() {
		window.addEventListener('scroll', function(e){

		if ($('body').hasClass('viewing-page-1')) {
			$('.phone').addClass('y0');
			$('.button').addClass('y1');
			$('.logo').addClass('y2');
		} else {
			$('.phone').removeClass('y0');
			$('.button').removeClass('y1');
			$('.logo').removeClass('y2');
		}
		if ($('body').hasClass('viewing-page-2')) {
			$('.left').addClass('gogo');
			$('.right').addClass('gogo');
		} else {
			$('.left').removeClass('gogo');
			$('.right').removeClass('gogo');
		}
		if ($('body').hasClass('viewing-page-3')) {
			$('.iphone').addClass('wtf');
		} else {
			$('.iphone').removeClass('wtf');
		}
		}
		);
	}
    window.onload = init();
</script>

Консоль ошибок не выдает.
При скролле класс body "viewing-page-X" присваивается. Где X это номер страницы от 1 до 3.

Но почему-то ничего не срабатывает.

Если что вот линк на сам проект:

http://test2.stdmed.ru

Только что дошло. Скролла то там нет как такового.
Тогда след. вопрос: на что поставить listener чтобы он отслеживал?

смотри документацию по плагину.

Что тут не так?

вроде все логично:

<script type="text/javascript">
	function init() {
		window.addEventListener("DOMMouseScroll", mouse_wheel, false);

		var mouse_wheel = function(event) {

		if ($('body').hasClass('viewing-page-1')) {
			$('.phone').addClass('y0');
			$('.button').addClass('y1');
			$('.logo').addClass('y2');
		} else {
			$('.phone').removeClass('y0');
			$('.button').removeClass('y1');
			$('.logo').removeClass('y2');
		}
		if ($('body').hasClass('viewing-page-2')) {
			$('.left').addClass('gogo');
			$('.right').addClass('gogo');
		} else {
			$('.left').removeClass('gogo');
			$('.right').removeClass('gogo');
		}
		if ($('body').hasClass('viewing-page-3')) {
			$('.iphone').addClass('wtf');
		} else {
			$('.iphone').removeClass('wtf');
		}
		}
	}
    window.onload = init();
</script>

На момент

window.addEventListener("DOMMouseScroll", mouse_wheel, false);

mouse_wheel === undefined, т.к.

function init() {
    window.addEventListener("DOMMouseScroll", mouse_wheel, false);

    var mouse_wheel = function(event) {}
}

это то же самое что:

function init() {
    var mouse_wheel;
    window.addEventListener("DOMMouseScroll", mouse_wheel, false);

    mouse_wheel = function(event) {}
}

Это принципы js, которые следовало бы знать.
Чтобы работало так как вы хотите - следует объявлять таки функцию:

function init() {
    window.addEventListener("DOMMouseScroll", mouse_wheel, false);

    function mouse_wheel(event) {}
}

P.S. Крутить страницу можно ещё и стрелочками, и кликом по "точкам" справа. Вам же сказали что надо делать: читать документацию к плагину, который вам реализует эту хрень. Там гарантировано есть специальное событие скролла.
...
https://github.com/peachananr/onepage-scrollКак же это сложно - читать документацию того, что используешь. Ведь сто раз приятней потратить кучу времени на реализацию через задницу.
*с презрением плюнул под ноги ViRuSreloaded*

DOMMouseScroll - неподдерживаемое событие. Тебе же написали смотри доку плагина, там наверняка есть коллбэк на смену страницы, вот в нем пиши свой код

Сделал как Вы сказали и все ЗАРАБОТАЛО!!!!!!!!!!!!!!!!

Я вас обожаю дорогие форумчане!

код получился такой:

<script>
	  $(document).ready(function(){
      $(".scroll").onepage_scroll({
    sectionContainer: "section",
    responsiveFallback: 400,
    loop: false,
        beforeMove: function(index) {
    	if ($('body').hasClass('viewing-page-1')) {
			$('.phone').addClass('y0');
			$('.button').addClass('y1');
			$('.logo').addClass('y2');
		} else {
			$('.phone').removeClass('y0');
			$('.button').removeClass('y1');
			$('.logo').removeClass('y2');
		}
		if ($('body').hasClass('viewing-page-2')) {
			$('.left').addClass('gogo');
			$('.right').addClass('gogo');
		} else {
			$('.left').removeClass('gogo');
			$('.right').removeClass('gogo');
		}
		if ($('body').hasClass('viewing-page-3')) {
			$('.iphone').addClass('wtf');
		} else {
			$('.iphone').removeClass('wtf');
		}
    }
   });
	});
</script>

кстати afterMove как раз позволяет достичь желаемого результата, так как beforeMove инициализирует анимацию на странице которая откроется через 0.4 сек.

Вообще-то тебе в index передается номер видимой страницы, так что незачем дергать body

Вопрос по кроссплатформенности теперь появился:
при скролле на планшете не работает one-page-scroll :(

соответственно не срабатывает отображение элементов на второй странице, так как не меняется класс у \'body\'.

Есть какой-нить простой способ???

может кто посоветует?