Почему в jQuery событие scroll не работает при body margin: 0;?

Question

[psylostlife]

Полтора часа не мог понять, почему не работает событие scroll, но все же путем отключения стилей, а потом построчного стирания обнаружил, что же убивает эвент scroll:

body {
    margin: 0;
}

Как только комментирую margin, событие начинает работать, только выставляю - и все, событие не срабатывает.

Кто-нибудь сталкивался с подобным? Как мне убрать отступы у body и при этом сохранить возможность отслеживания события прокрутки?

Собственно, событие ловлю так:

<script type="text/javascript">
$(document).ready(function(){
	$(window).scroll(function(){
		alert(1);
	});
});
</script>

Отладочная консоль белоснежна.

Answer 1

[Joe_May]

Жесть я 1.5 дня искал эту же ошибку у себя в JS, наткнулся на этот вопрос поиграл со стилями, в результате у меня было свойство body {height: 100%}, поэтому webkit"овские браузеры не запускали событие scroll()... это так если кто в будущем столкнется с этим, автору отдельное спасибо за вопрос =)

Comments

[FE-li]

спасибо огромное

[sergey_pavlenko]

спасибо за комментарий! Тоже очень много времени потратил на поиски почему scroll не отслеживается на странице :)

[AlpineMilk]

Просто бог!)

[DarkDaemon]

Я два часа бился с этой проблемой, даже не мог подумать, что в height: 100% проблема. Это косяк webkita?

[MrYupi]

Дай бог тебе человек здоровья

[Sim0n89]

Уже 2 ночи, я плюнул на это проблему , думал посплю и утром поищу , но лежу Гуглю, утром попробую, надеюсь поможет

Answer 2

[Виктор]

Не понял, причём тут margin: 0. Может дело просто в том, что в примере из вашего архива у вас высота контента меньше окна браузера, скролла нет и соответственно не срабатывает событие. Уменьшение окна браузера или увеличение высоты контента приводит к появлению скролла и срабатыванию события.

Comments

[psylostlife]

Нет, у меня там достаточно
, на несколько экранов прокрутки.

[psylostlife]

*br

[Виктор]

В IE 10, Chrome 31, Opera 12 всё работает при наличии скролла. На всякий случай, лучше выводить не через alert, а через console.log, мало ли что-то блокирует их.

Answer 3

[FRiMN]

У меня перестаёт работать при

html, body {
    height: 100%;
}

Comments

[Hillo_dp]

Возникла аналогичная проблема, решил установкой
min-height: 100%;

Answer 4

[Роман Якушев]

Попробуйте так

( function( $ ) {
    $(document).ready(function(){
        $(window).scroll(function(){
            alert(1);
        });
    });
} )( jQuery );

у меня сработало. а как у вас - не работает.

Answer 5

[Hillo_dp]

Столкнулся с похожей проблемой. Выяснил что в моём случае проблема была в том что родитель имел высоту в 100% и был растянут почти на всю высоту страницы, то есть больше видимой зоны. Прижимал футер к низу. Решение оказалось банальным.

.your_container {
    min-height: 100vh;
}

Answer 6

[Владлен Грачев]

Пример бы, где не работает. Здесь (на Тостере) при цеплянии приведенного скрипта alert отрабатывает, несмотря на margin:0; для body.
Ну и еще работающий пример.
Нужно больше информации. Может быть другие скрипты или еще что?

Comments

[psylostlife]

rghost.ru/50747025 - вот index со скриптами и стилями. Однако отключение каких-либо скриптов или стилей не срабатывает, даже body onscroll не работает, пока стоит margin: 0;

[Владлен Грачев]

Браузер какой? У меня в хроме отлично работает и с onscroll, и без, и с margin:0, и без.
Попробуйте другой браузер, режим инкогнито (сейчас вроде везде есть). Сбросить всякие кэши и перезапустить (с алертами иногда можно случайно отменить выполнение скриптов на странице вообще).

[psylostlife]

Удаление кэша и режим инкогнито не помогли :( Хром - 31.0.1650.63 m. В опере почему-то тоже не работает.

[psylostlife]

Отключение всех плагинов хрома тоже не принесло результата, хоть убей. Отключаю margin - работает, включаю - нет.

Answer 7

[Виталий Желтяков]

Проверьте размеры и позиции вашего блока до начала работы и во время работы скрипта. jQuery в некоторых случаях обнуляет размеры и позиции из-за чего не работают различные эффекты

Answer 8

[Ольга Буркацкая]

Поделюсь, меня тоже настигла данная проблема. Реализовывала scrollspy, который сначала тоже не сразу удалось сделать (нюансы с overflow и height). Все-таки сделала, но потом оказалось что не у меня не работает кнопка "вверх" (появление-исчезновение по скролу).
После пары часов мучений (обидно за время). Не могла понять что именно событие scroll не отрабатывает. Важно что за классы заданы у элементов страницы. Scrollspy я отслеживала по контейнеру main а не по body и именно у main был задан overflow:auto.
Решение оказалось простым до ужаса - просто стала отслеживать Scrollspyпо body и ему задала overflow:auto. Кнопка "вверх" заработала.

Answer 9

[Vlad-zorro]

Работает - $(window).scroll(function(){ });
Не работает - $('body').scroll(function(){ });

Answer 10

[Антон]

У меня тоже не работал scroll
Оказалось у основного блока div#content было свойство position: fixed; - для адаптивного меню.
Убрал fixed всё заработало.