jQuery/JavaScript: Phát hiện hướng cuộn - vấn đề về cấu trúc mã

Question

Tôi cần phát hiện hướng mà người dùng cuộn - "lên" hoặc "xuống". Dựa trên mã được tìm thấy trong câu trả lời này: How can I determine the direction of a jQuery scroll event?

Tôi đã cố gắng bọc nó trong một chức năng để phân biệt hơn một chút - nhưng rất tiếc, nó không hoạt động. Tôi nghĩ rằng nó có một cái gì đó để làm với cách tôi trả lại giá trị, nhưng hướng luôn luôn là "lên". Khá mới đối với JavaScript Tôi đang gặp sự cố khi giải quyết vấn đề này.

Đây là mã:

$(document).ready(function() { 

    'use strict'; 

    var lastScrollTop = 0, 
     st, 
     direction; 

    function detectDirection() { 

     st = window.pageYOffset; 

     if (st > lastScrollTop) { 
      direction = "down"; 
     } else { 
      direction = "up"; 
     } 

     lastScrollTop = st; 

     return direction; 

    } 

    $(window).bind('scroll', function() { 

     detectDirection(); 
     console.log(detectDirection()); 

    }); 

}); 

Và tôi cũng đã thiết lập một Fiddle.

Bạn có thể giúp tôi phát hiện ra vấn đề ở đâu không?

Answer 1

$(window).bind('scroll', function() { 

    var dir = detectDirection(); 
    console.log(dir); 

}); 

Bạn đang gọi detectDirection() hai lần trong mỗi sự kiện cuộn. Người đầu tiên phát hiện đúng hướng, nhưng người thứ hai chỉ thấy nó ở cùng một nơi, vì vậy nó trở lại "lên", và đó là những gì bạn đăng nhập.

Answer 2

Xem những gì bạn nhận được với điều này:

if (st > lastScrollTop) { 
    direction = "down"; 
} else if (st < lastScrollTop){ 
    direction = "up"; 
} else { 
    direction = "static"; 
} 

Ngoài những gì Barmar nói, bạn có thể thoát khỏi dòng (cuộc gọi) trên giao diện điều khiển đầu ra và chỉ cần giữ:

console.log(detectDirection()); 

Answer 3

Mã vì nó sẽ không hoạt động vì chúng tôi không bao giờ cập nhật lastScrollTop, đây là mã đang hoạt động ...

$(function(config){ 
    var lastScrollTop = 0, // setting initial scrolltop as top of page 
     direction; // direction of scroll 1)up -1)down 0)static 

    function detectDirection() { 
     // current scrollTop can't be cached or in the local global scope 
     var st = window.pageYOffset; 

     if (st > lastScrollTop) { 
      // scrolling down 
      direction = -1; 
     } else if (st < lastScrollTop){ 
      // scrolling up 
      direction = 1; 
     } else { 
      // static 
      direction = 0; 
     } 

     // updated lastscrolltop with new current top 
     lastScrollTop = st; 

     // return the direction 
     return direction; 
    }` 

Tôi đã sử dụng 0 làm tĩnh/1 khi cuộn lên/-1 khi cuộn xuống

Hy vọng rằng sẽ giúp ai đó.

Answer 4

Tôi đang cung cấp câu trả lời mới vì câu trả lời của BarMar giải quyết vấn đề trước mắt của bạn, giải pháp không giúp bạn cấu trúc mã theo cách cho phép bạn thực hiện hai việc.

1. Phạm vi đối tượng cuộn rộng hơn, cho phép bạn truy cập các thuộc tính của nó ở nơi khác. Điều này sẽ cho phép bạn làm điều gì đó nếu vị trí cuộn là một giá trị nhất định.

2. Cải thiện hiệu suất cuộn.

   // Your current functionality 
   $(document).ready(function() { 
       var scroll = { 
       down: true, 
       pos: 0 
       }; 
       var scrollPos; 
   
       var detectDirection = function() { 
       scrollPos = window.pageYOffset; 
   
       if (scrollPos > scroll.pos) { 
        scroll.down = true; 
       } else { 
        scroll.down = false; 
       } 
   
       scroll.pos = scrollPos; 
       }; 
   
       $(window).on('optimizedScroll', function() { 
       detectDirection(); 
   
       // Do something based on scroll direction 
       if (scroll.down == true) { 
        // fooFunction(); 
       } else { 
        // barFunction(); 
       } 
   
       // Do something based on scroll position, 
       // where scrollTrigger is a number 
       if (scroll.pos > scrollTrigger) { 
        // bazFunction(); 
       } 
       }); 
   }); 
   
   // Improve scroll performance 
   (function() { 
       var throttle = function(type, name, obj) { 
        var obj = obj || window; 
        var running = false; 
        var func = function() { 
        if (running) { 
         return; 
        } 
        running = true; 
        requestAnimationFrame(function() { 
        obj.dispatchEvent(new CustomEvent(name)); 
         running = false; 
        }); 
        }; 
        obj.addEventListener(type, func); 
       }; 
   
       throttle('scroll', 'optimizedScroll'); 
   })(); 
   

Thay vì sử dụng .bind(), bạn nên sử dụng .Trên(), theo jQuery .bind() documentation.

Immediately Invoked Function Expression (IIFE) để cải thiện hiệu suất cuộn đến từ MDN documentation for the scroll event.