Thỉnh thoảnh mình có hay nhận mấy task yêu cầu thực thi vài hành động khi khách hàng scroll (cuộn) lên hoặc xuống. Và việc đầu tiên giải quyết các task này là phải nhận diện được hành động của khách là đang scroll lên hay đang scroll xuống. Hôm nay sẽ chia sẻ với các bạn đoạn mã javascript giúp nhận diện hành động scroll lên hay cuộn xuống.
Mình sẽ sử dụng jQuery để cho tiện. Giải thích 1 chút về đoạn mã ngày là: đầu tiên sẽ ghi nhận vị trí đầu tiên khi scroll đến vị trí mới sẽ đối chiếu. Nếu vị trí mới này có tọa độ lớn hơn là scroll xuống, còn bé hơn là scroll lên. Đối chiếu xong thì gán lại vị trí đầu tiên là tọa độ vừa scroll tới. Cứ như thế… Và đây là mã chi tiết:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var iScrollPos = 0; $(window).scroll(function () { var iCurScrollPos = $(this).scrollTop(); if (iCurScrollPos < iScrollPos) { // Hành động scroll lên } else { if($(this).scrollTop()==0){ //Hành động ở trên top }else{ // Hành động scroll xuống } } iScrollPos = iCurScrollPos; }); |
Mình đã chú thích rõ vị trí để các bạn chèn code cho từng trường hợp.
Chúc các bạn thành công.
Huỳnh Mai Anh Kiệt
