स्क्रॉल दिशा का पता लगाना

Question

इसलिए मैं on scrollफ़ंक्शन को कॉल करने के लिए जावास्क्रिप्ट का उपयोग करने की कोशिश कर रहा हूं । लेकिन मैं जानना चाहता था कि क्या मैं jQuery का उपयोग किए बिना स्क्रॉल की दिशा का पता लगा सकता हूं। यदि नहीं, तो क्या कोई वर्कअराउंड हैं?

मैं सिर्फ एक 'टॉप' बटन लगाने के बारे में सोच रहा था, लेकिन अगर मैं कर सकता था तो इससे बचना चाहूंगा।

मैंने अभी इस कोड का उपयोग करने की कोशिश की है, लेकिन यह काम नहीं किया:

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

Comments

यह wheelDeltaघटना की है। काफी क्रॉस-ब्राउज़र नहीं। देखें phrogz.net/js/wheeldelta.html

— marekful

हम्म नहीं काफी मैं क्या देख रहा था, लेकिन मैं आपकी मदद की सराहना करते हैं: पी किसी भी अन्य सुझाव?

— dwinnbrown

Answer 1

पिछले scrollTopमान को संग्रहीत करके और इसके साथ वर्तमान स्क्रॉलटॉप मान की तुलना करके इसका पता लगाया जा सकता है ।

जावास्क्रिप्ट:

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

Comments

lastScrollTopपेजयोफ़्सेट शुरू करने के लिए यह अधिक सुरक्षित होगा || स्क्रॉल करने के बजाय 0 मान लेने के बजाय

— एड बैलट

पूर्णतया सहमत !! धन्यवाद @EdBallot हमें window.onload इवेंट पर ही इनिशियलाइज़ करना चाहिए।

— प्रेटेक

@Prateek आपके उत्तर के लिए धन्यवाद, लेकिन यह मेरे लिए काम नहीं कर रहा है ... मैं अपने वेबप में 'दृश्य बदलने' की कोशिश कर रहा हूं जो कि Tumult Hype का उपयोग करके बनाया गया है।

— dwinnbrown

मैंने अपने उत्तर में कुछ टिप्पणियाँ जोड़ी हैं, कृपया इसकी जाँच करें। मुझे लगता है कि आप "element.addEventListener" का उपयोग कर रहे हैं।

— प्रेटेक

@Prateek अभी भी कुछ भी नहीं मुझे डर है। क्या यह इस तथ्य से हो सकता है कि, मैं इसे पेज लोड पर चला रहा हूं? यहाँ एक स्क्रीनशॉट है: i.imgur.com/Q0H0T4s.png

— dwinnbrown

Answer 2

सभी स्क्रॉल ईवेंट (टच और व्हील) को पकड़ने का सरल तरीका

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

Comments

एसओ में आपका स्वागत है, यदि आप अपने उत्तर में एक छूट जोड़ते हैं, तो यह ओपी और दूसरों के लिए अधिक सहायक हो सकता है।

— एलेजांद्रो मोंटीला

Answer 3

स्क्रॉल दिशा खोजने के लिए इसका उपयोग करें। यह केवल वर्टिकल स्क्रॉल की दिशा का पता लगाने के लिए है। सभी क्रॉस ब्राउज़र का समर्थन करता है।

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

उदाहरण

Comments

यह अच्छा है, लेकिन केवल स्क्रॉल व्हील का उपयोग कर के लिए काम करने के लिए लगता है

— Jonathan.Brink

एमडीएन वेबडॉक्स से: नोट: स्क्रॉल घटना के साथ पहिया घटना को भ्रमित न करें। एक पहिया घटना की डिफ़ॉल्ट कार्रवाई कार्यान्वयन-विशिष्ट है, और जरूरी नहीं कि एक स्क्रॉल घटना को भेजा जाए। जब ऐसा होता है, तब भी पहिया घटना में डेल्टा * मूल्य आवश्यक रूप से सामग्री की स्क्रॉल दिशा को प्रतिबिंबित नहीं करते हैं। इसलिए, स्क्रॉलिंग दिशा प्राप्त करने के लिए पहिया घटना के डेल्टा * गुणों पर भरोसा न करें। इसके बजाय, स्क्रॉल घटना में लक्ष्य के स्क्रॉललेफ्ट और स्क्रॉलटॉप के मूल्य परिवर्तनों का पता लगाएं। developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event

— बट्टाबोम्बट्टाबम

Answer 4

आप ऐसा करने की कोशिश कर सकते हैं।

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>

Comments

यह मेरे लिए ठीक काम नहीं कर रहा है। जब मैं कुछ निश्चित ऊँचाई तक भी स्क्रॉल करता हूँ तो यह नीचे दिखाई देता है

— डेवलपर

Answer 5

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

Comments

आपके संकेत के लिए धन्यवाद ... यह IE "चिकनी स्क्रॉलिंग" विकल्प से जुड़ा हुआ लगता है

— क्रिस्टो

Answer 6

1. एक पुरानेवैल्यू को इनिशियलाइज़ करें
2. घटना को सुनकर न्यूवायु प्राप्त करें
3. दो को घटाओ
4. परिणाम से बाहर
5. पुरानेValue को 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;
});

Answer 7

आप स्क्रॉलबार स्थिति का उपयोग करके प्राप्त कर सकते हैं document.documentElement.scrollTop। और फिर इसे पिछली स्थिति से तुलना करने की बात है।

Comments

ठीक है और क्या मैं अभी भी इसे एक वेबसाइट पर उपयोग कर सकता हूं जो पारंपरिक रूप से स्क्रॉल करने की अनुमति नहीं देगा (यानी यह ब्राउज़र को 100% चौड़ाई और ऊंचाई के लिए फिट बैठता है। धन्यवाद

— dwinnbrown

Answer 8

यह सरल कोड काम करेगा: परिणामों के लिए कंसोल की जाँच करें।

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

Answer 9

मैं व्यक्तिगत रूप से जावास्क्रिप्ट में स्क्रॉल दिशा का पता लगाने के लिए इस कोड का उपयोग करता हूं ... बस आपको lastscrollvalue को स्टोर करने के लिए एक चर को परिभाषित करना होगा और फिर इस का उपयोग करें

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;

    }
}

Answer 10

सरल कोड

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

Comments

हालांकि यह कोड प्रश्न का उत्तर दे सकता है, लेकिन समस्या का हल कैसे और / या इसके संबंध में अतिरिक्त संदर्भ प्रदान करता है, इससे उत्तर के दीर्घकालिक मूल्य में सुधार होगा।

— डोनाल्ड डक