ghi danh cho div

Question

Phần tử div không có trình xử lý sự kiện onscroll? Hành vi trên trang của tôi dường như không cho biết trình xử lý sự kiện div onscroll được nhận dạng.

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

Ngoài ra,
Do sự kiện div cuộn cuộn lên các sự kiện cửa sổ cuộn, theo DOM kiện bọt?

Answer 1

Có nhưng phần tử cần phải có thanh cuộn. Bạn có thể cung cấp cho nó một hoặc overflow: auto (cung cấp cho bạn một thanh cuộn khi nội dung đủ cao) hoặc overflow: scroll. (Chúng có thể được đặt riêng cho x & y cũng như overflow-y: scroll ...)

Mặc dù chúng không bong bóng khi div đã được cuộn xuống đáy cửa sổ sẽ bắt đầu cuộn. (Về cơ bản nếu div có thể cuộn nó sẽ chặn sự kiện cuộn, nhưng nếu nó không thể thì nó sẽ chuyển đến trang)

Answer 2

Tôi biết nó có thể không chính xác những gì bạn đang tìm kiếm, nhưng rất nhiều javascript framework có thể giúp bạn với điều này. Nó không phải là cần thiết cho div để có một thanh cuộn cho bạn để móc vào các sự kiện di chuyển.

Ví dụ: Mootools có sự kiện mousewheel. Demo here. (Nó có thanh cuộn, nhưng bạn có thể sử dụng Firebug để xóa thanh cuộn và thử - nó vẫn hoạt động).

Tôi đã tự sử dụng bản thân này trên site Tôi đã thực hiện một lúc trước. Nếu bạn di chuyển trong khi giữ chuột qua các hình ảnh, nó sẽ ngăn việc di chuyển trang mặc định và thay vào đó trượt thanh hình ảnh.

Answer 3

Tùy thuộc vào phiên bản HTML bạn đang sử dụng, thay vào đó, bạn có thể sử dụng sự kiện onwheel.

Sự kiện onscroll chỉ hoạt động nếu tất cả những điều sau đây là đúng:

1. Các div có overflow: auto, overflow: scroll, overflow-y: scroll vv
2. Các div hiện đang có một thanh cuộn có thể nhìn thấy rằng có thể di chuyển.
3. Chuyển động của chuột thực sự khiến thanh cuộn cuộn.

Vì vậy, sự kiện onscroll không thực sự phù hợp để phát hiện chuyển động của bánh xe chuột chung.

Xin lưu ý rằng sự kiện onwheel là sự kiện mới trong HTML 5. According to w3schools, tuy nhiên, nó được hỗ trợ khá rộng rãi.

Answer 4

Tôi cũng đã gãi đầu vào vấn đề này, cho đến khi tôi bắt đầu tìm hiểu thêm về chỉ thị DOCTYPE. Thuộc tính onscroll không được hỗ trợ trong phiên bản mới nhất của thông số HTML. Nó sẽ hiển thị như cú pháp không hợp lệ trong Visual Studio. Nó có thể hoạt động trong nhiều trình duyệt, nhưng nó vẫn là mã không hợp lệ.

Thay vào đó, bạn có thể tổ chức sự kiện bằng Javascript hoặc jQuery. Tôi sử dụng cách tiếp cận như thế này để đồng bộ hóa cuộn trên hai div riêng biệt:

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

Answer 5

JQUERY scroll() có thể giúp bạn.

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