การตรวจจับทิศทางการเลื่อน

ดังนั้นฉันจึงพยายามใช้ JavaScript on scrollเพื่อเรียกใช้ฟังก์ชัน แต่ฉันอยากรู้ว่าฉันสามารถตรวจจับทิศทางของการเลื่อนโดยไม่ใช้ jQuery ได้หรือไม่ ถ้าไม่เช่นนั้นมีวิธีแก้ปัญหาใด ๆ หรือไม่?

ฉันคิดว่าจะแค่ใส่ปุ่ม "ไปด้านบน" แต่อยากจะหลีกเลี่ยงสิ่งนั้นถ้าทำได้

ตอนนี้ฉันเพิ่งลองใช้รหัสนี้ แต่ไม่ได้ผล:

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

สามารถตรวจพบได้โดยการจัดเก็บscrollTopค่าก่อนหน้าและเปรียบเทียบค่า scrollTop ปัจจุบันกับค่านั้น

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);

วิธีง่ายๆในการจับเหตุการณ์การเลื่อนทั้งหมด (สัมผัสและล้อ)

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

ใช้สิ่งนี้เพื่อค้นหาทิศทางการเลื่อน นี่เป็นเพียงการค้นหาทิศทางของ Vertical Scroll รองรับเบราว์เซอร์ข้ามทั้งหมด

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;
}

ตัวอย่าง

คุณสามารถลองทำสิ่งนี้

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>

นี่เป็นส่วนเพิ่มเติมของสิ่งที่ prateek ตอบดูเหมือนว่าจะมีข้อผิดพลาดในโค้ดใน IE ดังนั้นฉันจึงตัดสินใจที่จะแก้ไขอะไรเล็กน้อย (เป็นเพียงเงื่อนไขอื่น)

$('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. เริ่มต้น oldValue
2. รับค่าใหม่โดยการฟังเหตุการณ์
3. ลบทั้งสอง
4. สรุปจากผล
5. อัปเดต oldValue ด้วย newValue

// การเริ่มต้น

let oldValue = 0;

// ฟังในงาน

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;
});

document.documentElement.scrollTopคุณจะได้รับตำแหน่งโดยใช้แถบเลื่อน แล้วก็เป็นเพียงเรื่องของการเปรียบเทียบกับตำแหน่งก่อนหน้า

รหัสง่ายๆนี้จะใช้ได้: ตรวจสอบคอนโซลเพื่อดูผลลัพธ์

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);
});

ฉันใช้รหัสนี้เพื่อตรวจจับทิศทางการเลื่อนใน javascript เป็นการส่วนตัว ... เพียงแค่คุณกำหนดตัวแปรเพื่อจัดเก็บ lastscrollvalue จากนั้นใช้สิ่งนี้ if & else

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;

    }
}

รหัสง่ายๆ

// 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();
}