স্ক্রোলের দিকটি সনাক্ত করা হচ্ছে

Question

সুতরাং আমি জাভাস্ক্রিপ্ট ব্যবহার করার চেষ্টা করছি on scrollএকটি ফাংশন কল করতে। তবে আমি জানতে চেয়েছিলাম যে আমি jQuery ব্যবহার না করে স্ক্রলের দিকটি সনাক্ত করতে পারি কিনা। তা না হলে কি কোনও কাজের সুযোগ আছে?

আমি কেবল একটি 'টু টপ' বোতাম রাখার কথা ভাবছিলাম তবে আমি যদি পারতাম তবে তা এড়াতে চাই।

আমি এখন এই কোডটি ব্যবহার করার চেষ্টা করেছি কিন্তু এটি কার্যকর হয়নি:

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

Comments

এটি wheelDeltaইভেন্টের। বেশ ক্রস ব্রাউজার নয়। Phrogz.net/js/wheeldelta.html

— মারেফুল

হুম আমি যা খুঁজছিলাম তা পুরোপুরি নয় তবে আমি আপনার সাহায্যের প্রশংসা করছি: পি অন্য কোনও পরামর্শ?

— ডুইনব্রাউন

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 ধরে নেওয়ার চেয়ে স্ক্রোলটপ

— এড ব্যালট

সম্পূর্ণ একমত !! ধন্যবাদ @ এডবালোট উইন্ডো.অনলোড ইভেন্টে আমাদের একই সূচনা করা উচিত।

— প্রীতেক

@ প্রীতীক আপনার উত্তরের জন্য ধন্যবাদ তবে এটি আমার পক্ষে কাজ করছে না ... আমি আমার ওয়েব অ্যাপে 'চেঞ্জ চেঞ্জ' করার চেষ্টা করছি যা টিউল্ট হাইপ ব্যবহার করে নির্মিত হয়েছে।

— dwinnbrown

আমি আমার উত্তরে কয়েকটি মন্তব্য যুক্ত করেছি, দয়া করে এটি পরীক্ষা করে দেখুন। আমার ধারণা আপনি "এলিমেন্ট.এডএভেন্টলিস্টনার" ব্যবহার করছেন।

— প্রীতেক

@ প্রীতেক এখনও কিছুই ভয় পাচ্ছেন না এটি কি পৃষ্ঠার লোড এ চালিয়ে যাচ্ছি এই বিষয়টি নিয়ে কাজ করা যায়? এখানে একটি স্ক্রিনশট রয়েছে: i.imgur.com/Q0H0T4s.png

— ডুইনব্রাউন

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

এটি ভাল, তবে কেবল স্ক্রোল হুইল ব্যবহার করার জন্য কাজ করছে বলে মনে হচ্ছে

— জোনাথন।

এমডিএন ওয়েবডক্স থেকে: দ্রষ্টব্য: হুইল ইভেন্টটিকে স্ক্রোল ইভেন্টের সাথে গুলিয়ে ফেলবেন না। চাকা ইভেন্টের ডিফল্ট ক্রিয়াটি বাস্তবায়ন-নির্দিষ্ট এবং অগত্যা কোনও স্ক্রোল ইভেন্ট প্রেরণ করে না। এমনকি যখন এটি হয়, চাকা ইভেন্টের ডেল্টা * মানগুলি অগত্যা সামগ্রীতে স্ক্রোলিংয়ের দিকটি প্রতিফলিত করে না। অতএব, স্ক্রোলিং দিকনির্দেশ পেতে চাকা ইভেন্টের ডেল্টা * বৈশিষ্ট্যগুলির উপর নির্ভর করবেন না। পরিবর্তে, স্ক্রোল ইভেন্টের লক্ষ্যবস্তুতে স্ক্রোললিফ্ট এবং স্ক্রোলটপের মান পরিবর্তনগুলি সনাক্ত করুন। বিকাশকারী.মোজিলা.আর.ইন-

— ইউএস

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

এটি প্রীতেক উত্তর দিয়েছিল তার একটি সংযোজন 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. নতুন ভ্যালু সহ ওল্ডভ্যালু আপডেট করুন

// আরম্ভ

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

ঠিক আছে এবং আমি এখনও কোনও ওয়েবসাইটে এটি ব্যবহার করতে পারি যা tradition

— তিহ্যগতভাবে

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

আমি জাভাস্ক্রিপ্টে স্ক্রোলের দিকটি সনাক্ত করতে ব্যক্তিগতভাবে এই কোডটি ব্যবহার করি ... কেবলমাত্র লাস্টস্ক্রোলভ্যালু সঞ্চয় করতে আপনাকে একটি ভেরিয়েবল সংজ্ঞায়িত করতে হবে এবং তারপরে এই ব্যবহার করুন যদি অন্যথায়

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

যদিও এই কোডটি প্রশ্নের উত্তর দিতে পারে, কীভাবে এবং / বা কেন এটি সমস্যার সমাধান করে তা সম্পর্কিত অতিরিক্ত প্রসঙ্গ সরবরাহ করলে উত্তরের দীর্ঘমেয়াদী মান উন্নত হবে।

— ডোনাল্ড ডাক