onscroll for div

Question

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

<div id='bd' onscroll='alert("Scroll Called");'></div> 

Кроме того,
ли ДИВО событие прокрутки сверните события окна прокрутки, в соответствии с DOM события кипящего?

Answer 1

Да, но элемент должен иметь полосу прокрутки. Вы можете дать ему один из overflow: auto (который дает вам полосу прокрутки, когда контент достаточно высок) или overflow: scroll. (Они могут быть установлены специально для x & y overflow-y: scroll ...)

Хотя они не пузырятся, как только прокрутка div была прокручена до нижней части, окно начнет прокрутку. (В принципе, если div может прокрутить, он перехватит событие прокрутки, но если он не сможет, то он перейдет на страницу)

Answer 2

Я знаю, что это не совсем то, что вы ищете, но много javascript frameworks могут помочь вам в этом. Нет необходимости, чтобы у div была панель прокрутки для подключения к событиям прокрутки.

Например. Mootools имеет событие mousewheel. Demo here. (У него есть полосы прокрутки, но вы можете использовать Firebug для удаления полос прокрутки и попробовать - он все равно работает).

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

Answer 3

В зависимости от того, какую версию HTML вы используете, вместо этого вы можете использовать событие onwheel.

onscroll событие работает только тогда, когда все следующие условия:

1. ДИВ имеет overflow: auto, overflow: scroll, overflow-y: scroll и т.д.
2. ДИВ в настоящее время имеет видимую полосу прокрутки, который можно прокрутить.
3. Движение мыши фактически вызывает прокрутку полосы прокрутки.

Так что событие onscroll действительно не подходит для обнаружения общего движения колес мыши.

Обратите внимание, что событие onwheel новое в HTML 5. According to w3schools, но это довольно широко поддерживается.

Answer 4

Я тоже почесал голову над этим, пока не начал больше узнавать о директивах DOCTYPE. Атрибут onscroll не поддерживается в последней версии спецификации HTML. Он будет отображаться как недействительный синтаксис в Visual Studio. Он может работать во многих браузерах, но это еще недействительный код.

Вместо этого вы можете использовать событие canan с использованием Javascript или jQuery. Я использую такой подход, чтобы синхронизировать прокрутку на двух отдельных div:

$("#gridTableContainer").scroll(function() { 
    HandlingScrollingStuff(); 
}); 

Answer 5

JQUERY scroll() может вам помочь.

$("#gridTableContainer").scroll(function() { 
    HandlingScrollingStuff(); 
});