Cafedev chia sẻ về Sự kiện scroll. Nó cho phép phản hồi khi cuộn trang hoặc phần tử. Có một số điều tốt chúng ta có thể làm ở đây.
Ví dụ:
- Hiển thị / ẩn các điều khiển hoặc thông tin bổ sung tùy thuộc vào vị trí của người dùng trong tài liệu.
- Tải thêm dữ liệu khi người dùng cuộn xuống cuối trang.
Đây là một chức năng nhỏ để hiển thị cuộn hiện tại:
window.addEventListener('scroll', function() {
document.getElementById('showScroll').innerHTML = window.pageYOffset + 'px';
});Trong hành động:
Hiện tại cuộn = 524.2999877929688px
Sự kiện scroll hoạt động trên cả phần tử window có thể cuộn.
Ngăn việc cuộn
Làm thế nào để chúng ta làm cho một cái gì đó không thể kiểm soát được?
Chúng ta không thể ngăn cuộn bằng cách sử dụng event.preventDefault() trong trình nghe onscroll, vì nó kích hoạt sau khi cuộn đã diễn ra.
Nhưng chúng ta có thể ngăn việc cuộn theo một sự kiện event.preventDefault() gây ra cuộn, ví dụ sự kiện keydown cho pageUp và pageDown.
Nếu chúng ta thêm một trình xử lý sự kiện vào các sự kiện này và event.preventDefault() trong đó, thì cuộn sẽ không bắt đầu.
Có nhiều cách để bắt đầu một cuộn, vì vậy đáng tin cậy hơn là sử dụng CSS, thuộc tính overflow.
Dưới đây là một số tác vụ mà bạn có thể giải quyết hoặc xem qua để xem các ứng dụng onscroll.
Nguồn và tài liệu tiếng anh tham khảo:
Full series tự học Javascript từ cơ bản tới nâng cao tại đây nha.
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
