Window onscroll javascript не работает

Почему событие window onscroll не работает?

Я хочу выполнить событие window onscroll , но не знаю, почему он не работает во всех браузерах (firefox, chrome и т.д.), и ошибок не было.

Полный код:

В чем проблема?

Вы сказали что-то интересное:

x изменено на 0 и остается как есть.

Единственный способ в вашем коде, который может произойти, – это использовать функциональный блок onscroll , потому что ваш HTML устанавливает x.

Если ваш window.onscroll = function() действительно срабатывает, но вы не получаете правильную позицию прокрутки (т.е. 0), попробуйте изменить способ возврата позиции прокрутки:

Я узнал, что document.documentElement.scrollTop всегда возвращает 0 в Chrome. Это связано с тем, что WebKit использует body для отслеживания прокрутки, но Firefox и IE используют html .

Попробуйте обновленный фрагмент:

Для меня оператор document.body.scrollTop; хорошо работает в Chrome и Opera, но на Firefox возвращает 0.

Viceversa утверждение document.documentElement.scrollTop; работает хорошо на Firefox, но не в Chrome и Opera…

Может быть, document.body.scrollTop; не поддерживается FF

Возможные решения:

Оба они хорошо работают на всех вышеперечисленных браузерах.

На этот вопрос был дан ответ, но я хотел включить сведения о моей ситуации, которые предотвращают работу onscroll.

У меня есть datacontainer, у которого есть своя полоса прокрутки, которая переопределяет встроенную панель прокрутки окна. Я не заметил этого, пока не начал более подробно рассматривать элементы на странице с помощью хром-разработчика. Мой внешний тег выглядел следующим образом:

Это привело к появлению двух полос прокрутки слева. Это произошло потому, что свойство overflow: auto указывало контейнеру данных на создание другой полосы прокрутки.

Как только я удалил переполнение: auto, я теперь мог исправить попадание на событие onscroll.

Источник

Почему событие onscroll окна не работает?

Я хочу выполнить событие окна onscroll , но я не знаю, почему оно не работает во всех браузерах (Firefox, Chrome и т. Д.), И ошибок не возникло.

Полный код .

В чем проблема?

3 ответа

Вы сказали что-то интересное:

х изменился на 0 и остается как есть.

Единственный способ в вашем коде это может произойти, если функциональный блок onscroll внесет изменение, потому что ваш HTML устанавливает x.

Если ваш window.onscroll = function() действительно стреляет, но вы не получаете правильную позицию прокрутки (т. Е. 0), попробуйте изменить способ возврата позиции прокрутки:

Я обнаружил, что document.documentElement.scrollTop всегда возвращает 0 в Chrome. Это связано с тем, что WebKit использует body для отслеживания прокрутки, а Firefox и IE используют html .

Пожалуйста, попробуйте обновленный фрагмент:

На этот вопрос был дан ответ, но я хотел включить подробности моей ситуации, которые мешают работе прокрутки.

У меня есть контейнер данных, у которого была своя полоса прокрутки, которая переопределяет встроенную полосу прокрутки окна. Я не замечал этого до тех пор, пока не начал более тщательно просматривать элементы на странице с помощью Chrome Developer. Мой внешний тег выглядел так,

Это привело к появлению двух полос прокрутки слева. Это произошло потому, что свойство overflow: auto сообщало контейнеру данных о необходимости создания еще одной полосы прокрутки.

Как только я удалил переполнение: авто, я теперь мог исправить попадание события onscroll.

Для меня утверждение document.body.scrollTop; хорошо работает в Chrome и Opera, но в Firefox возвращает 0.

И наоборот, утверждение document.documentElement.scrollTop; хорошо работает в Firefox, но не в Chrome и Opera .

Может быть, document.body.scrollTop; не очень хорошо поддерживается FF

Возможные решения:

Они оба хорошо работают во всех вышеперечисленных браузерах.

Источник

Why window onscroll event does not work?

I want to execute the window onscroll event, but I don’t know why it doesn’t work on all browsers(firefox, chrome, etc), and there is no errors occurred.

Full code:

What is the problem ?

4 Answers 4

You said something interesting:

x changed to 0 and remains as is.

The only way in your code that can happen is if the onscroll function block makes a change because your HTML sets x.

If your window.onscroll = function() is indeed firing, but you are not getting the right scroll position (i.e. 0), try changing the way the scroll position is returned:

I found out that document.documentElement.scrollTop always returns 0 on Chrome. This is because WebKit uses body for keeping track of scrolling, but Firefox and IE use html .

Please try your updated snippet:

I had also the same problem , but I didn’t know the proper reason for that . In my case

this code didn’t work even after removing margin:0; and padding:0; . But by mention the addEventListener on the document.body it is worked

For me the statement document.body.scrollTop; works well in Chrome and Opera, but on Firefox returns 0.

Viceversa the statement document.documentElement.scrollTop; works good on Firefox but not in Chrome and Opera.

Maybe document.body.scrollTop; is not well supported by FF

Possible Solutions:

They both works well on all above browsers.

This question has been answered, but I wanted to include details of my situation that prevent onscroll from working.

I have datacontainer that had its own scroll bar which overrides the built in window scroll bar. I didnt notice this until I started giving a more thorough look at the elements on the page using chrome developer. My outer tag looked like this,

This caused two scroll bars to appear on the left. This was because the property, overflow:auto, was telling the data container to make another scroll bar.

Once I removed the overflow:auto I could now correct hit the onscroll event.

Источник

Почему событие прокрутки окна не запускается

У меня есть этот класс js:

Это я уже использовал раньше, но для этого одного конкретного проекта событие не запускается.

Я его загружаю так:

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

Даже если я ввожу в консоль разработчика (и снова без ошибок)

Которая запускается в stackoverflow, когда я печатаю.

В чем может быть причина? где-то в приложении останавливается распространение события? Если да, есть подсказка, как его найти? другое предположение? (это унаследованный проект)

4 ответа

Может случиться так, что некоторый элемент (сам body или какой-то вложенный div ) имеет свойство css overflow , установленное на scroll .

Чтобы попытаться определить, что это такое, вы можете добавить что-то вроде:

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

window нельзя прокручивать без генерации событий scroll . Вы можете убедиться, что какой-то сторонний код не удалил прослушиватель событий, щелкнув элемент в инструментах разработчика (вы также можете запустить getEventListeners(window).scroll ):

Если вы видите прослушиватель событий, значит в своем приложении вы фактически прокручиваете другой элемент:

Пример прокрутки окна на всю страницу:

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

В этом случае событие не всплывает, и вы не можете его прослушивать на уровне window .

Вероятно, это потому, что прокрутка элемента — это не тело. Возьмем в качестве примера этот фрагмент. Я привязываю прокрутку к телу, но поскольку прокрутка элемента — это элемент, а не тело, элемент не будет запущен. Вы должны проверить свой стиль и свое поведение.

Я столкнулся с этой проблемой во время последнего проекта, вам нужно заполнить цитату html, решение —

Current scroll = 43.20000076293945px

The scroll event works both on the window and on scrollable elements.

Prevent scrolling

How do we make something unscrollable?

We can’t prevent scrolling by using event.preventDefault() in onscroll listener, because it triggers after the scroll has already happened.

But we can prevent scrolling by event.preventDefault() on an event that causes the scroll, for instance keydown event for pageUp and pageDown .

If we add an event handler to these events and event.preventDefault() in it, then the scroll won’t start.

There are many ways to initiate a scroll, so it’s more reliable to use CSS, overflow property.

Here are few tasks that you can solve or look through to see the applications on onscroll .

Tasks

Endless page

Create an endless page. When a visitor scrolls it to the end, it auto-appends current date-time to the text (so that a visitor can scroll more).

Источник

Onscroll перестает работать

Здравствуйте!
Есть такая проблема. Делаю страницу — фотогаллерею. При нажатии на любую фотографию, мы должны попадать в режим просмотра фоток. Делаю модальное окно таким образом. При нажатии на фотку «обтягиваю» все окно дополнительным Div`ом, выставляю его на передний план и делаю в нем полупрозрачный фон. Таким образом все что за ним деактивируется. Сверху на него накладываю другой Div, в нем центрирую фотку и все такое. Поскольку для фонового Div`а я выставляю размеры 100% по ширине и высоте экрана, то при прокрутке, фон со своими 100% экрана поднимается, а ниже него оголяется страница. Я подумал, что высоту этого фонового Div`а можно менять динамически в зависимости от прокрутки.

И вот ведь какая проблема. Не знаю почему но событие onscroll, которое без этого модального окна работает прекрасно, при появлении этого дополнительного Div`а перестает работать. В чем дело? Заранее спасибо!

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Перестаёт работать событие
Ниже изложен код, который исправно работает до применения формы и перестаёт реагировать на событие.

Css перестает работать после выполнения функции
Здравствуйте. Встала у меня такая проблемка. Есть у меня такой кусочек css .buttons <.

Есть ли подобная альтернатива window.onscroll?
Есть ли подобная альтернатива, но с более плавным скроллом, без передергивания? Без аякс, ангуляр.

Проверить доступность события onscroll
как можно проверить доступность события onscroll? если проверить typeof(window.onscroll) то это.

М_Сергей, понять вас немного проблематично:

начинаете вы сообщение с рассказа о создании контейнера

c полупрозрачным фоном (для перекрытия доступа к прочим элементам страницы), в центре которого вы помещаете ещё один контейнер с картинкой — и пока всё ясно и понятно

затем вдруг пишете о каком-то «модальном окне» — откуда оно у вас взялось, чёрт побери?

похоже, что вы не в курсе, что такое модальное окно? — прочитайте и постарайтесь понять, что никакой HTML-контейнер страницы называть «модальным окном» нельзя в принципе (да, я в курсе, что есть куча плагинов, авторы которых называют создаваемые этими плагинами контейнеры «модальными окнами». тут можно сказать только одно — «не уподобляйтесь невеждам»)

главная «фишка» модальности — это прекращение любой работы страницы (включая её скролл) до тех пор, пока модальное окно не будет закрыто

Источник