Phát hiện hướng cuộn

Vì vậy, tôi đang cố gắng sử dụng JavaScript on scrollđể gọi một hàm. Nhưng tôi muốn biết liệu tôi có thể phát hiện hướng của cuộn mà không sử dụng jQuery hay không. Nếu không thì có cách giải quyết nào không?

Tôi đã nghĩ đến việc chỉ đặt một nút 'lên đầu' nhưng tôi muốn tránh điều đó nếu có thể.

Bây giờ tôi vừa thử sử dụng mã này nhưng nó không hoạt động:

if document.body.scrollTop <= 0 {
    alert ("scrolling down")
} else {
    alert ("scrolling up")
}

Nó có thể được phát hiện bằng cách lưu trữ scrollTopgiá trị trước đó và so sánh giá trị scrollTop hiện tại với nó.

JavaScript:

var lastScrollTop = 0;

// element should be replaced with the actual target element on which you have applied scroll, use window in case of no target element.
element.addEventListener("scroll", function(){ // or window.addEventListener("scroll"....
   var st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
   if (st > lastScrollTop){
      // downscroll code
   } else {
      // upscroll code
   }
   lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);

Cách đơn giản để bắt tất cả các sự kiện cuộn (chạm và bánh xe)

window.onscroll = function(e) {
  // print "false" if direction is down and "true" if up
  console.log(this.oldScroll > this.scrollY);
  this.oldScroll = this.scrollY;
}

Sử dụng điều này để tìm hướng cuộn. Điều này chỉ để tìm hướng của Cuộn dọc. Hỗ trợ tất cả các trình duyệt chéo.

var scrollableElement = document.body; //document.getElementById('scrollableElement');

scrollableElement.addEventListener('wheel', checkScrollDirection);

function checkScrollDirection(event) {
  if (checkScrollDirectionIsUp(event)) {
    console.log('UP');
  } else {
    console.log('Down');
  }
}

function checkScrollDirectionIsUp(event) {
  if (event.wheelDelta) {
    return event.wheelDelta > 0;
  }
  return event.deltaY < 0;
}

Thí dụ

Bạn có thể thử làm điều này.

function scrollDetect(){
  var lastScroll = 0;

  window.onscroll = function() {
      let currentScroll = document.documentElement.scrollTop || document.body.scrollTop; // Get Current Scroll Value

      if (currentScroll > 0 && lastScroll <= currentScroll){
        lastScroll = currentScroll;
        document.getElementById("scrollLoc").innerHTML = "Scrolling DOWN";
      }else{
        lastScroll = currentScroll;
        document.getElementById("scrollLoc").innerHTML = "Scrolling UP";
      }
  };
}


scrollDetect();

html,body{
  height:100%;
  width:100%;
  margin:0;
  padding:0;
}

.cont{
  height:100%;
  width:100%;
}

.item{
  margin:0;
  padding:0;
  height:100%;
  width:100%;
  background: #ffad33;
}

.red{
  background: red;
}

p{
  position:fixed;
  font-size:25px;
  top:5%;
  left:5%;
}

<div class="cont">
  <div class="item"></div>
  <div class="item red"></div>
  <p id="scrollLoc">0</p>
</div>

Đây là một bổ sung cho những gì prateek đã trả lời. Có vẻ như có một trục trặc trong mã trong IE vì vậy tôi quyết định sửa đổi nó một chút không có gì lạ (chỉ là một điều kiện khác)

$('document').ready(function() {
var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       console.log("down")
   }
   else if(st == lastScrollTop)
   {
     //do nothing 
     //In IE this is an important condition because there seems to be some instances where the last scrollTop is equal to the new one
   }
   else {
      console.log("up")
   }
   lastScrollTop = st;
});});

1. Khởi tạo oldValue
2. Nhận Giá trị mới bằng cách lắng nghe sự kiện
3. Trừ hai
4. Kết luận từ kết quả
5. Cập nhật oldValue bằng newValue

// Khởi tạo

let oldValue = 0;

// Đang nghe về sự kiện

window.addEventListener('scroll', function(e){

    // Get the new Value
    newValue = window.pageYOffset;

    //Subtract the two and conclude
    if(oldValue - newValue < 0){
        console.log("Up");
    } else if(oldValue - newValue > 0){
        console.log("Down");
    }

    // Update the old value
    oldValue = newValue;
});

Bạn có thể lấy vị trí thanh cuộn bằng cách sử dụng document.documentElement.scrollTop. Và sau đó nó chỉ đơn giản là vấn đề so sánh nó với vị trí trước đó.

Mã đơn giản này sẽ hoạt động: Kiểm tra bảng điều khiển để biết kết quả.

let scroll_position = 0;
let scroll_direction;

window.addEventListener('scroll', function(e){
    scroll_direction = (document.body.getBoundingClientRect()).top > scroll_position ? 'up' : 'down';
    scroll_position = (document.body.getBoundingClientRect()).top;
    console.log(scroll_direction);
});

Cá nhân tôi sử dụng mã này để phát hiện hướng cuộn trong javascript ... Chỉ cần bạn phải xác định một biến để lưu trữ giá trị kéo dài và sau đó sử dụng điều này nếu & khác

let lastscrollvalue;

function headeronscroll() {

    // document on which scroll event will occur
    var a = document.querySelector('.refcontainer'); 

    if (lastscrollvalue == undefined) {

        lastscrollvalue = a.scrollTop;

        // sets lastscrollvalue
    } else if (a.scrollTop > lastscrollvalue) {

        // downscroll rules will be here
        lastscrollvalue = a.scrollTop;

    } else if (a.scrollTop < lastscrollvalue) {

        // upscroll rules will be here
        lastscrollvalue = a.scrollTop;

    }
}

Mã đơn giản

// Events
$(document).on('mousewheel DOMMouseScroll', "element", function(e) {
    let delta = e.originalEvent.wheelDelta;
    
    if (delta > 0 || e.originalEvent.detail < 0) upScrollFunction();
    if (delta < 0 || e.originalEvent.detail > 0) donwScrollFunction();
}