Trong hướng dẫn này, bạn sẽ tìm hiểu về các sự kiện cuộn trong JavaScript và cách xử lý sự kiện cuộn đúng cách.

Bạn đang xem : cuộn trình xử lý sự kiện js

Tóm tắt : trong hướng dẫn này, bạn sẽ tìm hiểu về các sự kiện cuộn trong JavaScript và cách xử lý sự kiện cuộn đúng cách.

Giới thiệu về các sự kiện cuộn trong JavaScript

Khi bạn cuộn một tài liệu hoặc một phần tử, các sự kiện cuộn sẽ kích hoạt. Bạn có thể kích hoạt các sự kiện cuộn theo những cách sau, chẳng hạn như:

  • Sử dụng thanh cuộn theo cách thủ công
  • Sử dụng con lăn chuột
  • Nhấp vào liên kết ID
  • Gọi các hàm trong JavaScript

Để đăng ký trình xử lý sự kiện scroll , bạn gọi phương thức addEventListener () trên phần tử đích, như sau:

 

targetElement.addEventListener (

'scroll'

, (sự kiện) = & gt; { });

Ngôn ngữ mã:

PHP

(

php

)

hoặc chỉ định một trình xử lý sự kiện vào thuộc tính onscroll của phần tử đích:

 

targetElement.onscroll =

(

event

) = & gt;

{ };

Ngôn ngữ mã:

JavaScript

(

javascript

)

Cuộn tài liệu

Thông thường, bạn xử lý các sự kiện scroll trên đối tượng window để xử lý cuộn của toàn bộ trang web.

< p> Phần sau trình bày cách đính kèm trình xử lý sự kiện vào sự kiện scroll của một trang:

 

window

.addEventListener (

'scroll'

, (event) = & gt; {

console

.log (

'Scrolling ...'

); });

Ngôn ngữ mã:

JavaScript

(

javascript

)

Hoặc bạn có thể sử dụng Thuộc tính onscroll trên đối tượng window :

 

window

.onscroll =

function

(

event

)

{ };

Ngôn ngữ mã:

JavaScript

(

javascript

)

onscroll < / code> thuộc tính của đối tượng window giống với document.body.onscroll và bạn có thể sử dụng chúng thay thế cho nhau, ví dụ:

 

document

.body.onscroll =

rỗng

;

console

.log (

window

.onscroll);

Ngôn ngữ mã:

JavaScript

(

javascript

)

Hiệu ứng cuộn

Đối tượng window có hai thuộc tính liên quan đến các sự kiện cuộn: scrollX scrollY .

scrollX Thuộc tính scrollY trả về số pixel mà tài liệu hiện đang được cuộn theo chiều ngang và chiều dọc. scrollX scrollY là các giá trị dấu phẩy động có độ chính xác kép, vì vậy nếu bạn cần các giá trị số nguyên, bạn có thể sử dụng Math.round () để làm tròn chúng.

scrollX scrollY bằng 0 nếu tài liệu chưa được cuộn.

pageXOffset pageYOffset là bí danh của các thuộc tính scrollX scrollY .

Cuộn một phần tử

Giống như đối tượng window , bạn có thể đính kèm trình xử lý sự kiện scroll vào bất kỳ phần tử HTML nào. Tuy nhiên, để theo dõi độ lệch cuộn, bạn sử dụng scrollTop scrollLeft thay vì scrollX scrollY . < / p>

Thuộc tính scrollTop đặt hoặc lấy số lượng pixel mà nội dung của phần tử được cuộn theo chiều dọc. Thuộc tính scrollLeft nhận và đặt số lượng pixel mà nội dung của phần tử được cuộn từ cạnh trái của nó.

Ví dụ sau cho biết cách xử lý scroll sự kiện của phần tử div với id scrollDemo :

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Sự kiện cuộn JS

& lt; / < p class = "hljs-name"> title

& gt;

& lt;

style

& gt;

# scrollDemo

{

height

:

200px

;

width

:

200px

;

tràn

: auto;

background-color

:

# f0db4f

}

# scrollDemo

p

{

height

:

300px

;

width

:

300px

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

id

=

" scrollDemo "

& gt;

& lt;

p

& gt;

Bản trình diễn sự kiện cuộn JS

& lt; /

p

& gt;

& lt; /

div

& gt;

& lt;

div

id

=

" control "

& gt;

Nút

& lt;

id

=

" btnScrollLeft "

& gt;

Nút Cuộn sang trái

& lt; /

& gt; Nút

& lt;

id

=

" btnScrollTop "

& gt;

Nút cuộn lên trên

& lt; /

& gt;

& lt; /

div

& gt;

& lt;

script

& gt;

let

control =

document

.querySelector (

'# control' < / p>); control.addEventListener (

'click'

,

function

(

e

)

{

let

div =

document

.getElementById (

'scrollDemo' );

let

target = e.target;

chuyển đổi

(target.id) {

case

'btnScrollLeft'

: div.scrollLeft + =

20

;

ngắt

;

case

'btnScrollTop'

: div.scrollTop + =

20

;

ngắt

; } });

& lt; /

script

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;

Ngôn ngữ mã:

HTML, XML

(

xml

)

< / p>

Các cách tốt hơn để xử lý các sự kiện cuộn

Nhiều sự kiện scroll kích hoạt khi bạn đang cuộn một trang hoặc một phần tử. Nếu bạn đính kèm trình xử lý sự kiện vào sự kiện scroll , thì mã trong trình xử lý sự kiện cần thời gian để thực thi.

Điều này sẽ gây ra sự cố được gọi là lỗi cuộn. Hiệu ứng jank cuộn gây ra độ trễ để trang không cảm thấy bị neo vào ngón tay của bạn.

Điều chỉnh sự kiện

Tốt hơn nhiều là bạn nên giữ scroll trình xử lý sự kiện nhẹ và thực thi nó sau N mili giây bằng cách sử dụng bộ đếm thời gian. Vì vậy, thay vì sử dụng mã sau (và bạn không bao giờ nên sử dụng nó):

 

window

.scroll =

()

= & gt; { };

Ngôn ngữ mã:

JavaScript

(

javascript

)

Bạn nên sử dụng mã sau: < / p>

 

let

scrolling =

sai

;

window

.scroll =

()

= & gt; { scrolling =

true

; }; setInterval (

()

= & gt;

{

if

(cuộn) { scrolling =

false

; } },

300

);

Ngôn ngữ mã:

JavaScript

(

javascript

)

Cách hoạt động:

  • Đầu tiên, đặt cờ cuộn thành false . Nếu sự kiện scroll kích hoạt, hãy đặt cờ cuộn thành true bên trong trình xử lý sự kiện scroll .
  • < li> Sau đó, thực thi trình xử lý sự kiện scroll bằng cách sử dụng setInterval () 300 mili giây một lần nếu các sự kiện scroll có được kích hoạt.

Cách xử lý sự kiện scroll này được gọi là điều chỉnh sự kiện điều chỉnh một onscroll hoạt động cơ bản của mỗi 300 mili giây. Việc điều chỉnh làm chậm tốc độ thực thi của trình xử lý sự kiện cuộn.

Sự kiện thụ động

Gần đây, các trình duyệt web hiện đại hỗ trợ các sự kiện thụ động cho các sự kiện đầu vào như scroll , touchstart , wheel , v.v. Nó cho phép chuỗi giao diện người dùng xử lý sự kiện ngay lập tức trước khi chuyển quyền kiểm soát cho trình xử lý sự kiện tùy chỉnh của bạn.

Trong trình duyệt web hỗ trợ các sự kiện thụ động, bạn cần thêm cờ passive vào bất kỳ trình xử lý sự kiện nào không gọi PreventDefault () , như sau:

< pre class = "wp-block-code">

document

.addEventListener (

'scroll'

,
(sự kiện) = & gt; {

},
{

passive

:

true

}
);

Ngôn ngữ mã:

JavaScript

(

javascript

)

Không có bị động tùy chọn, mã trong trình xử lý sự kiện sẽ luôn được gọi trước khi chuỗi giao diện người dùng thực hiện cuộn.

Kiểm tra trình duyệt nào đang hỗ trợ sự kiện thụ động tại đây .

Tóm tắt

  • Sự kiện scroll kích hoạt khi bạn cuộn một trang web hoặc một phần tử.
  • Đối với một trang, thuộc tính scrollX scrollY trả về số pixel mà tài liệu hiện đang được cuộn theo chiều ngang và chiều dọc.
  • Đối với phần tử, thuộc tính scrollTop scrollLeft được đặt hoặc lấy số lượng pixel mà nội dung của phần tử được cuộn theo chiều dọc và cuộn từ cạnh trái của nó.
  • Sử dụng t kỹ thuật điều chỉnh sự kiện của ông để xử lý tốt hơn các sự kiện cuộn. Trong các trình duyệt web hiện đại, bạn có thể sử dụng trình xử lý sự kiện thụ động.

Hướng dẫn này có hữu ích không?


Xem thêm những thông tin liên quan đến chủ đề cuộn nghe sự kiện js

The "scroll" event in JavaScript | window.onscroll

  • Tác giả: dcode
  • Ngày đăng: 2018-06-24
  • Đánh giá: 4 ⭐ ( 2851 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: By making use of the "scroll" event in JavaScript, you are able to react to when the users of your web page scroll down or up. Learn more in this video tutorial.

    In this video I take you through the usage of the "scroll" event on the Window object. This allows us to listen for when the user scrolls up or down the page - we then implement a function that displays a message box when the user has reached the bottom of the page.

    Support me on Patreon:
    https://www.patreon.com/dcode - with enough funding I plan to develop a website of some sort with a new developer experience!

    For your reference, check this out:
    https://developer.mozilla.org/en-US/docs/Web/Events/scroll

    Follow me on Twitter @dcode!

    If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

    dcode javascript webdev

Bài 15: Bắt sự kiện cuộn trang với jQuery

  • Tác giả: goclamweb.com
  • Đánh giá: 3 ⭐ ( 3574 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài này, mình sẽ hướng dẫn các bạn bắt sự kiện cuộn trang với jQuery. Chúng ta sẽ tạo hiệu ứng khi cuộn trang đến đâu, các thành phần của website sẽ biến đổi theo.

Các sự kiện (Event) trong Javascript

  • Tác giả: freetuts.net
  • Đánh giá: 3 ⭐ ( 8526 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các sự kiện trong javascript: Chúng ta có các sự kiện như click - ondbclick - onchange - onmouseover .. xem danh sách sự kiện event trong js tại đây

Sự kiện (Event) trong JavaScript

  • Tác giả: viettuts.vn
  • Đánh giá: 4 ⭐ ( 1594 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sự kiện (Event) trong JavaScript là sự tương tác của JavaScript với HTML xảy ra khi người dùng hoặc trình duyệt thao tác với một trang web.

Cuộn sự kiện nghe javascript

  • Tác giả: vi.athabasca-foto.com
  • Đánh giá: 3 ⭐ ( 2557 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Có trình nghe js khi người dùng cuộn trong một hộp văn bản nhất định có thể được sử dụng không? Kinda như onclick ngoại trừ cuộn. Tôi thấy trình xử lý sự kiện HTML5 cho cuộn nhập số - chỉ Chrome nhưng t ...

Cuộn sự kiện nghe javascript

  • Tác giả: vi.panaindustrial.com
  • Đánh giá: 5 ⭐ ( 7496 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Có trình nghe js khi người dùng cuộn trong một hộp văn bản nhất định có thể được sử dụng không? Kinda như onclick ngoại trừ cuộn. Tôi thấy trình xử lý sự kiện HTML5 cho cuộn nhập số - chỉ Chrome nhưng t ...

[Tự học Javascript] Scrolling trong Javascript

  • Tác giả: cafedev.vn
  • Đánh giá: 5 ⭐ ( 5059 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 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.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Kiểu danh sách CSS: hơn 20 ví dụ - kiểu danh sách html css

By ads_php