2010-06-01 9 views
14

Czy element div nie ma obsługi zdarzeń onscroll? Zachowanie na mojej stronie nie wydaje się wskazywać, że funkcja obsługi zdarzeń div została rozpoznana.onscroll dla div

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

Również
Czy wydarzenia div przewijania rolki do przewijania okna zdarzeń, jak na razie DOM stacjonarnego?

Odpowiedz

2

Tak, ale element musi mieć pasek przewijania. Możesz podać jeden z numerem overflow: auto (który wyświetla pasek przewijania, gdy zawartość jest wystarczająco wysoka) lub overflow: scroll. (Te mogą być ustawione specjalnie dla x & y także overflow-y: scroll ...)

Chociaż nie bańki, gdy div został przewinięty na dół okno rozpocznie przewijanie. (Zasadniczo, jeśli element div może go przewinąć, przechwyci zdarzenie przewijania, ale jeśli nie może przejść do strony)

+5

Dzięki. Ale mam zestaw właściwości przepełnienia. Przewijam element div, ale nie zwracam na niego uwagi. Co mogę robić źle? –

1

Wiem, że to może nie być dokładnie to, czego szukasz, ale wiele javascript frameworks mogą ci w tym pomóc. Nie jest konieczne, aby div miał pasek przewijania, abyś mógł przechwycić zdarzenia przewijania.

Np. Mootools ma wydarzenie mousewheel. Demo here. (Posiada paski przewijania, ale możesz użyć Firebug, aby usunąć paski przewijania i spróbować - nadal działa).

Użyłem tego sam na site Zrobiłem chwilę z powrotem. Jeśli przewiniesz, przytrzymując mysz nad obrazami, zapobiegnie przewijaniu strony domyślnej, a zamiast tego przesunie pasek obrazu.

12

W zależności od używanej wersji HTML można zamiast tego użyć zdarzenia onwheel.

Impreza onscroll działa tylko wtedy, gdy wszyscy są spełnione następujące warunki:

  1. Div ma overflow: auto, overflow: scroll, overflow-y: scroll itp
  2. Div ma obecnie widoczny pasek przewijania, którą można przewijać.
  3. Ruch myszki powoduje przewijanie paska przewijania.

Zdarzenie onscroll nie jest więc odpowiednie do wykrywania ogólnego ruchu kółka myszy.

Należy pamiętać, że wydarzenie onwheel jest nowe w HTML 5. According to w3schools, jest jednak dość powszechnie obsługiwane.

4

Podrapałem się też w głowę, dopóki nie zacząłem uczyć się więcej o dyrektywach DOCTYPE. Atrybut onscroll nie jest obsługiwany w najnowszej wersji specyfikacji HTML. Zostanie wyświetlona jako nieprawidłowa składnia w programie Visual Studio. Może działać w wielu przeglądarkach, ale nadal jest nieprawidłowym kodem.

Zamiast tego możesz wydarzenie canan używając JavaScript lub jQuery. Używam podejście tak, aby synchronizować przewijanie na dwóch oddzielnych div:

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

Nie powinieneś wierzyć we wszystko, co Microsoft mówi o specyfikacjach. Lubią robić swoje i lubią nazywać je standardami. A VS sprawia, że ​​czujesz się jak Word, będąc "prawidłowym" i "prawidłowym" _ zgodnie z MS_. W rzeczywistości jedynie MS opiera się ostatecznie na DOCTYPE, czy robi dziwactwa, czy nie; wszystkie inne przeglądarki wyświetlają po prostu HTML. [Użyj MDN do nauki HTML, CSS i JS] (https://developer.mozilla.org/en/docs/DOM/window.onscroll)! Nigdy nie używaj w3schools, przeczytaj dlaczego na [w3fools.com] (http://w3fools.com). MSDN jest w porządku dla IE, ale nie polegaj na nich. ps: Zdarzenie onscroll ma specyfikację HTML5, bez jQuery. – metadings

+1

Ummm, tak. Tak właśnie mówiłem, kiedy wskazałem powyżej, że "nadal jest ono nieważne", nawet jeśli Visual Studio pokaże je jako prawidłowe. – Ripside

0

JQUERY przewijania() może pomóc.

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