Giải thích sự kiện cuộn JavaScript, điều chỉnh sự kiện & sự kiện thụ động – cuộn nghe sự kiện js

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 và scrollY .

scrollX Thuộc tính và 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 và 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 và scrollY bằng 0 nếu tài liệu chưa được cuộn.

pageXOffset và pageYOffset là bí danh của các thuộc tính scrollX và 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 và scrollLeft thay vì scrollX và 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 và 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 và 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?