Cách làm việc với tính năng cuộn trên các Trang Web

Khám phá cách tương tác với thao tác cuộn, phản ứng với các sự kiện cuộn và điều chỉnh chúng

Cuộn trang để xem nội dung dưới màn hình đầu tiên có lẽ là sự kiện phổ biến nhất xảy ra trên một trang, hơn cả các lần nhấp chuột hoặc sự kiện bàn phím.

Bạn có thể lắng nghescrollsự kiện trênwindowđối tượng nhận thông tin mỗi khi người dùng cuộn trang:

window.addEventListener('scroll', event => {
  // scroll event detected
})

Bên trong trình xử lý sự kiện, bạn có thể kiểm tra vị trí cuộn dọc hiện tại bằng cách chọnwindowbất động sảnwindow.scrollYvà di chuyển ngang bằng cách sử dụngwindow.scrollX.

window.addEventListener('scroll', event => {
  console.log(window.scrollY)
  console.log(window.scrollX)
})

Hãy ghi nhớ rằngscrollsự kiện không phải là chuyện chỉ xảy ra một lần.

Nó kích hoạt rất nhiều lần trong khi cuộn, không chỉ ở cuối hoặc đầu cuộn, vì vậy sẽ có vấn đề nếu bạn cần thực hiện bất kỳ loại thao tác nào.

Bạn không nên trực tiếp thực hiện bất kỳ tính toán hoặc thao tác nào trong trình xử lý sự kiện trình xử lý, nhưng chúng ta nên sử dụngđiều tiếtthay thế.

Throttling

Cácscrollsự kiện không được kích hoạt một lần cho mỗi sự kiện, mà chúng liên tục gọi hàm xử lý sự kiện của chúng trong suốt thời gian của hành động.

Điều này là do nó cung cấp tọa độ để bạn có thể theo dõi những gì đang xảy ra.

Nếu bạn thực hiện một thao tác phức tạp trong trình xử lý sự kiện, bạn sẽ ảnh hưởng đến hiệu suất và gây ra trải nghiệm chậm chạp cho người dùng trang web của bạn.

Các thư viện cung cấp điều tiết nhưLodashtriển khai nó trong hơn 100 dòng mã, để xử lý mọi trường hợp sử dụng có thể. Cách triển khai đơn giản và dễ hiểu là cái này, sử dụngsetTimeoutđể lưu vào bộ nhớ cache sự kiện cuộn cứ sau 100 mili giây:

let cached = null
window.addEventListener('scroll', event => {
  if (!cached) {
    setTimeout(() => {
      //you can access the original event at `cached`
      cached = null
    }, 100)
  }
  cached = event
})

Điều chỉnh điều chỉnh cũng áp dụng chomousemovesự kiện chúng ta đã thấy trong bài học về sự kiện chuột. Điều tương tự - sự kiện đó được kích hoạt nhiều lần khi bạn di chuyển chuột.

Đây là một ví dụ trên Codepen:

Xem bútSự kiện cuộnbởi Flavio Copes (@flaviocopes) trênCodePen.

Tech Wiki Online!