JS 31 – Sự kiện Scroll trong JavaScript

0
920

Xin chào các bạn, trong bài học ngày hôm nay mình sẽ giới thiệu đến các bạn sự kiện Scroll hay còn gọi là “cuộn chuột”.

Sự kiện scroll được sử dụng cho các nội dung dài mà không có quá nhiều không gian để hiển thị. Sự kiện scroll giúp chúng ta:

  •  Hiển thị/ẩn các thông tin bổ sung tùy thuộc vào vị trí của tài liệu mà người dùng đang sử dụng.
  • Tải thêm dữ liệu khi người dùng cuộn xuống đến cuối trang.

Dưới đây là một hàm nhỏ để hiển thị scroll hiện tại:

Trong hành động đó:

Current scroll = 233px.

Sự kiện scroll hoạt động cả trên cả window và các phần tử có thể cuộn.

Ngăn sự kiện scroll

Làm thế nào để chúng ta ngăn sự kiện scroll? Chúng ta không thể ngăn scroll bằng cách sử dụng hàm event.preventDefault() vì nó kích hoạt sau khi scroll đã xảy ra.

Nhưng chúng ta có thể ngăn việc scroll bởi event.preventDefault() trên một sự kiện gây ra scroll.

Ví dụ:

Sự kiện wheel – (một hành động touchpad “scroll” cũng tạo ra nó).
Sự kiện keydown cho pageUppageDown.

Đôi khi điều đó có thể hữu ích. Nhưng có nhiều cách để cuộn, do đó, rất khó để xử lý tất cả chúng. Vì vậy, việc sử dụng CSS để không cho phần tử đó cuộn được, chẳng hạn như thuộc tính overflow sẽ tốt hơn nhiều.

Dưới đây là ví dụ mà bạn có  xem qua để hiểu về sự kiện scroll hơn:

Trang vô tận

Tạo một trang vô tận. Khi khách truy cập cuộn nó đến cuối, nó tự động nối thêm ngày giờ hiện tại vào văn bản (để khách truy cập có thể cuộn nhiều hơn).

Hai tính năng quan trọng của scroll:

  • Scroll có tính “đàn hồi”. Chúng ta có thể cuộn tài liệu bắt đầu hoặc kết thúc trong một số trình duyệt/thiết bị ( khi đó không gian trống bên dưới được hiển thị, và sau đó tài liệu sẽ tự động “trở lại” bình thường).
  • Scroll có tính không chính xác. Khi chúng ta cuộn đến cuối trang, thì chúng ta có thể  thấy vẫn còn 0-50px so với đáy tài liệu thực.

Vì vậy, “cuộn đến cuối” có nghĩa là khách truy cập không quá 100px so với phần kết thúc của tài liệu.

Kết luận

Như vậy trong bài học ngày hôm nay mình đã giới thiệu đến các bạn sự kiện Scroll trong JavaScript. Trong bài học tiếp theo chúng ta sẽ cùng nhau tìm hiểu về sự kiện onload và onerror trong JavaScript.

.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây