ฉันจะกำหนดทิศทางของเหตุการณ์การเลื่อน jQuery ได้อย่างไร


344

ฉันกำลังมองหาบางสิ่งบางอย่างกับผลกระทบนี้:

$(window).scroll(function(event){
   if (/* magic code*/ ){
       // upscroll code
   } else {
      // downscroll code
   }
});

ความคิดใด ๆ


สำหรับผู้ที่มีปัญหาเกี่ยวกับการเลื่อนแบบยืดหยุ่นโปรดใช้คำตอบนี้stackoverflow.com/questions/7154967/jquery-detect-scrolldown
Timothy Dalton

1
การใช้งานที่ง่ายที่สุดwheelเหตุการณ์วันนี้: stackoverflow.com/a/33334461/3168107
Shikkediel

คำตอบ:


699

ตรวจสอบกระแสscrollTopเทียบกับก่อนหน้าscrollTop

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       // downscroll code
   } else {
      // upscroll code
   }
   lastScrollTop = st;
});

16
มีวิธีใดบ้างในการตั้งค่าความรู้สึกสำหรับสิ่งนี้
coder โกโก้

8
ฉันทำตัวอย่างที่นี้ codepen บางทีฉันจะอัปเดตอัปเดตคำตอบนี้ด้วยปลั๊กอิน jQuery เนื่องจากความนิยม
Josiah Ruddell

3
คุณได้ลองแล้วหรือยังถ้าคุณกลับมาที่หน้าก่อนหน้านี้โดยใช้รหัสนี้? หากคุณเลื่อนหน้าลงให้พูด 500PX ไปที่หน้าอื่นแล้วกลับไปที่หน้าเริ่มต้น เบราว์เซอร์บางตัวรักษาตำแหน่งการเลื่อนและจะนำคุณกลับมาที่หน้า คุณจะเริ่มต้นlastScrollTopที่ 0 หรือจะเริ่มต้นได้อย่างถูกต้องหรือไม่?
TCHdvlp

7
@TCHdvlp - สถานการณ์กรณีที่เลวร้ายที่สุดเหตุการณ์การเลื่อนครั้งแรกจะอัปเดตตัวแปรและเหตุการณ์ที่สองจะมีความแม่นยำ (.. เฉพาะการเลื่อนขึ้นลงหลังจากการนำทางกลับ) อาจแก้ไขได้โดยการตั้งค่าvar lastScrollTop = $(window).scrollTop()หลังจากที่เบราว์เซอร์อัปเดตตำแหน่งการเลื่อนเมื่อโหลดหน้าเว็บ
Josiah Ruddell

2
การอัปเดตเกี่ยวกับสิ่งนี้: โปรดระวังว่าเบราว์เซอร์บางตัวโดยเฉพาะ IE 11 บน Windows 8 สามารถใช้ไฟเหตุการณ์การเลื่อนตามพิกเซลย่อย (การเลื่อนที่ราบรื่น) แต่เนื่องจากรายงาน scrollTop เป็นจำนวนเต็มค่าการเลื่อนก่อนหน้าของคุณอาจเหมือนกับค่าปัจจุบัน
Renato

168

คุณสามารถทำได้โดยไม่ต้องติดตามส่วนบนสุดก่อนหน้าเนื่องจากตัวอย่างอื่น ๆ ต้องการ:

$(window).bind('mousewheel', function(event) {
    if (event.originalEvent.wheelDelta >= 0) {
        console.log('Scroll up');
    }
    else {
        console.log('Scroll down');
    }
});

ฉันไม่ได้เป็นผู้เชี่ยวชาญในเรื่องนี้ดังนั้นโปรดค้นคว้าเพิ่มเติม แต่ดูเหมือนว่าเมื่อคุณใช้งาน$(element).scrollกิจกรรมที่ฟังอยู่นั้นเป็นเหตุการณ์ 'เลื่อน'

แต่ถ้าคุณรับฟังmousewheelเหตุการณ์โดยเฉพาะโดยใช้การผูกoriginalEventแอตทริบิวต์ของพารามิเตอร์เหตุการณ์ที่โทรกลับของคุณมีข้อมูลที่แตกต่างกัน ส่วนหนึ่งของข้อมูลนั้นคือwheelDeltaเป็นส่วนหนึ่งของข้อมูลที่มีถ้ามันเป็นบวกคุณขยับเมาส์วีลขึ้น ถ้ามันเป็นลบคุณก็เลื่อนเมาส์วีลลง

ฉันเดาว่าmousewheelเหตุการณ์จะเกิดขึ้นเมื่อล้อของเมาส์หมุนแม้ว่าหน้าเว็บจะไม่เลื่อน กรณีที่เหตุการณ์ 'เลื่อน' อาจไม่ถูกไล่ออก หากคุณต้องการคุณสามารถโทรevent.preventDefault()ที่ด้านล่างของการเรียกกลับเพื่อป้องกันไม่ให้หน้าเลื่อนและเพื่อให้คุณสามารถใช้เหตุการณ์ล้อเลื่อนของสิ่งอื่นนอกเหนือจากการเลื่อนหน้าเช่นฟังก์ชันการซูมบางประเภท


13
ดี แต่น่าเศร้าที่ Firefox ตัวเดียวเท่านั้นที่ไม่สนับสนุนมันdeveloper.mozilla.org/en-US/docs/DOM/DOM_event_reference/ ...... (ทดสอบใน FF v15) : C
nuala

8
สิ่งนี้มีประโยชน์สำหรับฉัน: ฉันต้องการตรวจจับการเลื่อนแม้ว่าหน้าเว็บจะไม่เลื่อนจริง ๆ แต่scrollTopก็ไม่ได้อัปเดต ในความเป็นจริง$(window).scroll()ไม่ได้ยิงเลย
Martti Laine

13
เป็นเรื่องดีที่คุณไม่ต้องการสถานะเก่า อย่างไรก็ตามเทคนิคนี้ใช้ไม่ได้กับโทรศัพท์มือถือหรือแท็บเล็ตเนื่องจากไม่มีมูฟ!
joeytwiddle

13
วิธีการนี้ใช้ไม่ได้หากฉันเลื่อนด้วยแป้นพิมพ์ มันเป็นแนวทางที่น่าสนใจสำหรับสิ่งต่าง ๆ เช่นการซูม แต่ฉันไม่คิดว่ามันจะตอบคำถามทิศทางการเลื่อน
chmac

6
$ ("html, body"). bind ({'mousewheel DOMMouseScroll onmousewheel touchmove scroll': function (e) {// ... }); ทำงานได้ดีสำหรับฉันในการตรวจสอบข้อมูลการเลื่อนของเบราว์เซอร์ทั้งหมด
GoreDefex

31

เก็บตำแหน่งการเลื่อนก่อนหน้านี้จากนั้นดูว่าตำแหน่งใหม่นั้นใหญ่กว่าหรือน้อยกว่านั้น

นี่คือวิธีหลีกเลี่ยงตัวแปรทั่วโลก ( ซอที่มีอยู่ที่นี่ ):

(function () {
    var previousScroll = 0;

    $(window).scroll(function(){
       var currentScroll = $(this).scrollTop();
       if (currentScroll > previousScroll){
           alert('down');
       } else {
          alert('up');
       }
       previousScroll = currentScroll;
    });
}()); //run this anonymous function immediately

29

ทางออกที่มีอยู่

อาจมีวิธีแก้ปัญหา 3 ข้อจากการโพสต์นี้และคำตอบอื่น ๆคำตอบอื่น

โซลูชันที่ 1

    var lastScrollTop = 0;
    $(window).on('scroll', function() {
        st = $(this).scrollTop();
        if(st < lastScrollTop) {
            console.log('up 1');
        }
        else {
            console.log('down 1');
        }
        lastScrollTop = st;
    });

โซลูชันที่ 2

    $('body').on('DOMMouseScroll', function(e){
        if(e.originalEvent.detail < 0) {
            console.log('up 2');
        }
        else {
            console.log('down 2');
        }
    });

โซลูชัน 3

    $('body').on('mousewheel', function(e){
        if(e.originalEvent.wheelDelta > 0) {
            console.log('up 3');
        }
        else {
            console.log('down 3');
        }
    });

การทดสอบหลายเบราว์เซอร์

ฉันไม่สามารถทดสอบกับ Safari ได้

chrome 42 (Win 7)

  • โซลูชันที่ 1
    • สูงสุด: 1 เหตุการณ์ต่อ 1 การเลื่อน
    • ลง: 1 เหตุการณ์ต่อ 1 การเลื่อน
  • การแก้ปัญหา 2
    • ขึ้น: ไม่ทำงาน
    • ลง: ไม่ทำงาน
  • โซลูชัน 3
    • สูงสุด: 1 เหตุการณ์ต่อ 1 การเลื่อน
    • ลง: 1 เหตุการณ์ต่อ 1 การเลื่อน

Firefox 37 (Win 7)

  • โซลูชันที่ 1
    • สูงสุด: 20 เหตุการณ์ต่อ 1 การเลื่อน
    • ลง: 20 เหตุการณ์ต่อ 1 การเลื่อน
  • การแก้ปัญหา 2
    • ขึ้น: ไม่ทำงาน
    • ลง: 1 เหตุการณ์ต่อ 1 การเลื่อน
  • โซลูชัน 3
    • ขึ้น: ไม่ทำงาน
    • ลง: ไม่ทำงาน

IE 11 (Win 8)

  • โซลูชันที่ 1
    • ขึ้น: 10 เหตุการณ์ต่อ 1 การเลื่อน (ผลข้างเคียง: การเลื่อนลงเกิดขึ้นในที่สุด)
    • ลง: 10 เหตุการณ์ต่อ 1 การเลื่อน
  • การแก้ปัญหา 2
    • ขึ้น: ไม่ทำงาน
    • ลง: ไม่ทำงาน
  • โซลูชัน 3
    • ขึ้น: ไม่ทำงาน
    • ลง: 1 เหตุการณ์ต่อ 1 การเลื่อน

IE 10 (Win 7)

  • โซลูชันที่ 1
    • สูงสุด: 1 เหตุการณ์ต่อ 1 การเลื่อน
    • ลง: 1 เหตุการณ์ต่อ 1 การเลื่อน
  • การแก้ปัญหา 2
    • ขึ้น: ไม่ทำงาน
    • ลง: ไม่ทำงาน
  • โซลูชัน 3
    • สูงสุด: 1 เหตุการณ์ต่อ 1 การเลื่อน
    • ลง: 1 เหตุการณ์ต่อ 1 การเลื่อน

IE 9 (Win 7)

  • โซลูชันที่ 1
    • สูงสุด: 1 เหตุการณ์ต่อ 1 การเลื่อน
    • ลง: 1 เหตุการณ์ต่อ 1 การเลื่อน
  • การแก้ปัญหา 2
    • ขึ้น: ไม่ทำงาน
    • ลง: ไม่ทำงาน
  • โซลูชัน 3
    • สูงสุด: 1 เหตุการณ์ต่อ 1 การเลื่อน
    • ลง: 1 เหตุการณ์ต่อ 1 การเลื่อน

IE 8 (Win 7)

  • โซลูชันที่ 1
    • ขึ้น: 2 เหตุการณ์ต่อ 1 การเลื่อน (ผลข้างเคียง: การเลื่อนลงเกิดขึ้นในที่สุด)
    • ลง: 2 ~ 4 กิจกรรมต่อการเลื่อน 1 ครั้ง
  • การแก้ปัญหา 2
    • ขึ้น: ไม่ทำงาน
    • ลง: ไม่ทำงาน
  • โซลูชัน 3
    • สูงสุด: 1 เหตุการณ์ต่อ 1 การเลื่อน
    • ลง: 1 เหตุการณ์ต่อ 1 การเลื่อน

โซลูชันแบบรวม

ฉันตรวจสอบว่าผลข้างเคียงจาก IE 11 และ IE 8 นั้นมาจากif elseคำสั่ง ดังนั้นฉันจึงแทนที่ด้วยif else ifคำสั่งดังต่อไปนี้

จากการทดสอบหลายเบราว์เซอร์ฉันตัดสินใจใช้โซลูชัน 3สำหรับเบราว์เซอร์ทั่วไปและโซลูชันที่ 1สำหรับ firefox และ IE 11

ฉันส่งคำตอบนี้เพื่อตรวจสอบ IE 11

    // Detect IE version
    var iev=0;
    var ieold = (/MSIE (\d+\.\d+);/.test(navigator.userAgent));
    var trident = !!navigator.userAgent.match(/Trident\/7.0/);
    var rv=navigator.userAgent.indexOf("rv:11.0");

    if (ieold) iev=new Number(RegExp.$1);
    if (navigator.appVersion.indexOf("MSIE 10") != -1) iev=10;
    if (trident&&rv!=-1) iev=11;

    // Firefox or IE 11
    if(typeof InstallTrigger !== 'undefined' || iev == 11) {
        var lastScrollTop = 0;
        $(window).on('scroll', function() {
            st = $(this).scrollTop();
            if(st < lastScrollTop) {
                console.log('Up');
            }
            else if(st > lastScrollTop) {
                console.log('Down');
            }
            lastScrollTop = st;
        });
    }
    // Other browsers
    else {
        $('body').on('mousewheel', function(e){
            if(e.originalEvent.wheelDelta > 0) {
                console.log('Up');
            }
            else if(e.originalEvent.wheelDelta < 0) {
                console.log('Down');
            }
        });
    }

หากใครบางคนสามารถเพิ่มผลของSafari browserมันจะเป็นประโยชน์ในการเสริมการแก้ปัญหา
เคมีโปรแกรมเมอร์

อ๊ะ! ฉันพบว่าเบราว์เซอร์เริ่มต้นสำหรับมือถือ Chrome และ Android นั้นครอบคลุมโดยโซลูชัน 1 เท่านั้นดังนั้นจะเป็นการดีกว่าถ้าใช้ทั้งโซลูชัน 1 และ 3 ร่วมกันเพื่อครอบคลุมเบราว์เซอร์ต่างๆ
โปรแกรมเมอร์เคมี

จะไม่ทำงานหากการออกแบบเป็นการออกแบบเค้าโครงที่คงที่ หากคุณต้องการตรวจสอบทิศทางการเลื่อนบนเว็บไซต์ที่ไม่มีการเลื่อนแบบคงที่ Firefox และ IE11 จะไม่ทำงาน
Shannon Hochkins

ฉันพบว่าเมื่อฉันใช้สิ่งนี้มันใช้ "เบราว์เซอร์อื่น ๆ " ในโครเมี่ยมนี่ไม่ได้ใช้งานมากนักเมื่อคุณต้องการตรวจจับการเลื่อนโดยล้อเลื่อนของเมาส์และแถบเลื่อน .scroll จะตรวจจับการเลื่อนทั้งสองแบบในโครเมี่ยม
แซม

12

ฉันเข้าใจว่ามีคำตอบที่ยอมรับแล้ว แต่ต้องการโพสต์สิ่งที่ฉันใช้ในกรณีที่สามารถช่วยใครได้ ฉันได้รับทิศทางเช่นนั้นcliphexกับเหตุการณ์ mousewheel แต่ด้วยการสนับสนุน Firefox มีประโยชน์ในการทำเช่นนี้ในกรณีที่คุณกำลังทำอะไรบางอย่างเช่นการล็อคการเลื่อนและไม่สามารถรับการเลื่อนด้านบนในปัจจุบัน

ดูรุ่นที่มีชีวิตอยู่ที่นี่

$(window).on('mousewheel DOMMouseScroll', function (e) {

    var direction = (function () {

        var delta = (e.type === 'DOMMouseScroll' ?
                     e.originalEvent.detail * -40 :
                     e.originalEvent.wheelDelta);

        return delta > 0 ? 0 : 1;
    }());

    if(direction === 1) {
       // scroll down
    }
    if(direction === 0) {
       // scroll up
    }
});

@EtienneMartin รหัสข้างต้นอาศัย jQuery ถ้านั่นคือสิ่งที่ทำให้เกิดข้อผิดพลาดของคุณ โปรดดูซอที่แนบมาเพื่อดูการทำงาน
อาหารม

8

เลื่อนกิจกรรม

เหตุการณ์เลื่อนพฤติกรรมผิดปกติใน FF (มันจะยิงหลายครั้งเพราะความเรียบเนียนเลื่อน) แต่มันทำงาน

หมายเหตุ: เลื่อนเหตุการณ์จริงเป็นเชื้อเพลิงเมื่อลากแถบเลื่อนโดยใช้ปุ่มลูกศรหรือเมาส์วีล

//creates an element to print the scroll position
$("<p id='test'>").appendTo("body").css({
    padding: "5px 7px",
    background: "#e9e9e9",
    position: "fixed",
    bottom: "15px",
    left: "35px"
});

//binds the "scroll" event
$(window).scroll(function (e) {
    var target = e.currentTarget,
        self = $(target),
        scrollTop = window.pageYOffset || target.scrollTop,
        lastScrollTop = self.data("lastScrollTop") || 0,
        scrollHeight = target.scrollHeight || document.body.scrollHeight,
        scrollText = "";

    if (scrollTop > lastScrollTop) {
        scrollText = "<b>scroll down</b>";
    } else {
        scrollText = "<b>scroll up</b>";
    }

    $("#test").html(scrollText +
      "<br>innerHeight: " + self.innerHeight() +
      "<br>scrollHeight: " + scrollHeight +
      "<br>scrollTop: " + scrollTop +
      "<br>lastScrollTop: " + lastScrollTop);

    if (scrollHeight - scrollTop === self.innerHeight()) {
      console.log("► End of scroll");
    }

    //saves the current scrollTop
    self.data("lastScrollTop", scrollTop);
});

เหตุการณ์ล้อ

นอกจากนี้คุณยังสามารถดู MDN มันเปิดเผยข้อมูลที่ดีเกี่ยวกับเหตุการณ์ล้อเหตุการณ์ล้อ

บันทึก:เหตุการณ์ล้อเกิดขึ้นเมื่อใช้งานเมาส์วีลเท่านั้นเท่านั้น ปุ่มเคอร์เซอร์และการลากแถบเลื่อนจะไม่เริ่มเหตุการณ์

ฉันอ่านเอกสารและตัวอย่าง: ฟังเหตุการณ์นี้ผ่านเบราว์เซอร์
และหลังจากการทดสอบบางอย่างกับ FF, IE, chrome, ซาฟารีฉันลงเอยด้วยตัวอย่างข้อมูลนี้:

//creates an element to print the scroll position
$("<p id='test'>").appendTo("body").css({
    padding: "5px 7px",
    background: "#e9e9e9",
    position: "fixed",
    bottom: "15px",
    left: "15px"
});

//attach the "wheel" event if it is supported, otherwise "mousewheel" event is used
$("html").on(("onwheel" in document.createElement("div") ? "wheel" : "mousewheel"), function (e) {
    var evt = e.originalEvent || e;

    //this is what really matters
    var deltaY = evt.deltaY || (-1 / 40 * evt.wheelDelta), //wheel || mousewheel
        scrollTop = $(this).scrollTop() || $("body").scrollTop(), //fix safari
        scrollText = "";

    if (deltaY > 0) {
        scrollText = "<b>scroll down</b>";
    } else {
        scrollText = "<b>scroll up</b>";
    }

    //console.log("Event: ", evt);
    $("#test").html(scrollText +
      "<br>clientHeight: " + this.clientHeight +
      "<br>scrollHeight: " + this.scrollHeight +
      "<br>scrollTop: " + scrollTop +
      "<br>deltaY: " + deltaY);
});

2
ฉันมีมุมมองพาเนลคงที่ซึ่งปิดการใช้งานแถบเลื่อนที่แท้จริงดังนั้นฉันจำเป็นต้องตรวจสอบทิศทางจากล้อเลื่อนของเมาส์ โซลูชันเมาส์วีลของคุณทำงานข้ามเบราว์เซอร์ได้อย่างสมบูรณ์แบบขอบคุณมากสำหรับสิ่งนั้น!
Shannon Hochkins

8

ในกรณีที่คุณต้องการทราบว่าคุณเลื่อนขึ้นหรือลงโดยใช้อุปกรณ์ตัวชี้ (เมาส์หรือแทร็กแพด) คุณสามารถใช้คุณสมบัติdeltaYของwheelเหตุการณ์

$('.container').on('wheel', function(event) {
  if (event.originalEvent.deltaY > 0) {
    $('.result').append('Scrolled down!<br>');
  } else {
    $('.result').append('Scrolled up!<br>');
  }
});
.container {
  height: 200px;
  width: 400px;
  margin: 20px;
  border: 1px solid black;
  overflow-y: auto;
}
.content {
  height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="content">
    Scroll me!
  </div>
</div>

<div class="result">
  <p>Action:</p>
</div>


ลิงค์นี้บอกว่าไม่ต้องพึ่งพา deltaY developer.mozilla.org/en-US/docs/Web/Events/wheel
Charlie Martin


3

ฉันได้เห็นคำตอบที่ดีหลายรุ่นที่นี่ แต่ดูเหมือนว่าบางคนมีปัญหาข้ามเบราว์เซอร์ดังนั้นนี่คือการแก้ไขของฉัน

ฉันใช้สิ่งนี้ได้สำเร็จในการตรวจหาทิศทางใน FF, IE และ Chrome ... ฉันไม่ได้ทดสอบในซาฟารีเนื่องจากฉันใช้ windows โดยทั่วไป

$("html, body").bind({'mousewheel DOMMouseScroll onmousewheel touchmove scroll': 
    function(e) {
        if (e.target.id == 'el') return;
        e.preventDefault();
        e.stopPropagation();

        //Determine Direction
        if (e.originalEvent.wheelDelta && e.originalEvent.wheelDelta >= 0) {
            //Up
            alert("up");

        } else if (e.originalEvent.detail && e.originalEvent.detail <= 0) {
            //Up
            alert("up");

        } else {
            //Down
            alert("down");
        }
    }
});

โปรดทราบฉันยังใช้สิ่งนี้เพื่อหยุดการเลื่อนดังนั้นหากคุณต้องการให้การเลื่อนยังคงเกิดขึ้นคุณต้องลบ e.preventDefault(); e.stopPropagation();


1
กลับลงมาบน Android GS5
เสมอ

มันใช้งานได้ดีมาก! ฉันมีปัญหากับคำตอบที่ได้รับคะแนนสูงสุดใน IE นี่ไม่มีปัญหานั้น! +1 จากฉัน
Radmation

3

ในการเพิกเฉยสแนปส์ / โมเมนตัม / เด้งกลับมาที่ด้านบนและด้านล่างของหน้านี่คือคำตอบที่ได้รับการยอมรับของ Josiah :

var prevScrollTop = 0;
$(window).scroll(function(event){

    var scrollTop = $(this).scrollTop();

    if ( scrollTop < 0 ) {
        scrollTop = 0;
    }
    if ( scrollTop > $('body').height() - $(window).height() ) {
        scrollTop = $('body').height() - $(window).height();
    }

    if (scrollTop >= prevScrollTop && scrollTop) {
        // scrolling down
    } else {
        // scrolling up
    }

    prevScrollTop = scrollTop;
});

3

คุณสามารถกำหนดทิศทางของเมาส์ได้

$(window).on('mousewheel DOMMouseScroll', function (e) {
    var delta = e.originalEvent.wheelDelta ? 
                   e.originalEvent.wheelDelta : -e.originalEvent.detail;

    if (delta >= 0) {
        console.log('scroll up');
    } else {
        console.log('scroll down');
    }
});

3

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

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

    scrollableElement.addEventListener('wheel', findScrollDirectionOtherBrowsers);

    function findScrollDirectionOtherBrowsers(event){
        var delta;

        if (event.wheelDelta){
            delta = event.wheelDelta;
        }else{
            delta = -1 * event.deltaY;
        }

        if (delta < 0){
            console.log("DOWN");
        }else if (delta > 0){
            console.log("UP");
        }

    }

ตัวอย่าง


3

รหัสนี้ใช้ได้ดีกับ IE, Firefox, Opera และ Chrome:

$(window).bind('wheel mousewheel', function(event) {
      if (event.originalEvent.deltaY >= 0) {
          console.log('Scroll down');
      }
      else {
          console.log('Scroll up');
      }
  });

'wheel mousewheel 'และคุณสมบัติdeltaYต้องใช้ในฟังก์ชันbind ()

ข้อควรจำ: ผู้ใช้ของคุณต้องอัปเดตระบบและเบราว์เซอร์ด้วยเหตุผลด้านความปลอดภัย ในปี 2018 ข้อแก้ตัวของ "ฉันมี IE 7" เป็นเรื่องไร้สาระ เราต้องให้ความรู้แก่ผู้ใช้

ขอให้เป็นวันที่ดี :)


1
ฉันลองใช้รหัสของคุณแล้วมันก็เป็นวิธีอื่น อันแรกจะถูกเรียกใช้เมื่อเลื่อนลงและอันที่สองเมื่อเลื่อนขึ้น
AlexioVay

สวัสดี :) ขอบคุณ AlexioVay ฉันแก้ไขโค้ดของฉัน (ประมาณเวลาด้วย!) ^^ แน่นอน "console.log ('....... ')" เป็นเพียงตัวอย่างของสิ่งที่เราสามารถทำได้
Cyril Morales

2

ทำให้มันง่ายมาก:

วิธีฟังเหตุการณ์ jQuery:

$(window).on('wheel', function(){
  whichDirection(event);
});

วิธีฟังเหตุการณ์ของ Vanilla JavaScript:

if(window.addEventListener){
  addEventListener('wheel', whichDirection, false);
} else if (window.attachEvent) {
  attachEvent('wheel', whichDirection, false);
}

ฟังก์ชั่นยังคงเหมือนเดิม:

function whichDirection(event){
  console.log(event + ' WheelEvent has all kinds of good stuff to work with');
  var scrollDirection = event.deltaY;
  if(scrollDirection === 1){
    console.log('meet me at the club, going down', scrollDirection);
  } else if(scrollDirection === -1) {
    console.log('Going up, on a tuesday', scrollDirection);
  }
}

ผมเขียนโพสต์แบบเจาะลึกเพิ่มเติมเกี่ยวกับมันนี่


จำเป็นต้องใช้ jQuery-wheel เพื่อใช้งาน jquery version หรือไม่
Hastig Zusammenstellen

1
ไม่จำเป็นต้องใช้ jquery-wheel สำหรับ @HastigZusammenstellen
CR Rollyson

2

คุณสามารถใช้ตัวเลือกทั้งเลื่อนและล้อเลื่อนเพื่อติดตามการเคลื่อนไหวขึ้นและลงในครั้งเดียว

 $('body').bind('scroll mousewheel', function(event) {

if (event.originalEvent.wheelDelta >= 0) {
      console.log('moving down');   
    }
    else {
      console.log('moving up'); 
    }
});

คุณสามารถแทนที่ 'body' ด้วย (หน้าต่าง) ได้เช่นกัน


ดูเหมือนว่าจะทำงานได้ดีใน Chrome แต่ไม่ใช่ใน FF (55.0.2, Ubuntu)
Hastig Zusammenstellen

1

สต็อกเพิ่มขึ้นใน.data ()องค์ประกอบของการเลื่อนจากนั้นคุณจะสามารถทดสอบจำนวนครั้งที่เลื่อนถึงด้านบน


1

ทำไมไม่มีใครใช้eventวัตถุที่ส่งกลับโดยjQueryเมื่อเลื่อน?

$window.on('scroll', function (event) {
    console.group('Scroll');
    console.info('Scroll event:', event);
    console.info('Position:', this.pageYOffset);
    console.info('Direction:', event.originalEvent.dir); // Here is the direction
    console.groupEnd();
});

ฉันกำลังใช้chromiumและฉันไม่ได้ตรวจสอบเบราว์เซอร์อื่น ๆ หากพวกเขามีdirคุณสมบัติ


1

เนื่องจากbindเลิกใช้แล้วใน v3 ("แทนที่on") และwheelได้รับการสนับสนุนตอนนี้ลืมwheelDelta:

$(window).on('wheel', function(e) {
  if (e.originalEvent.deltaY > 0) {
    console.log('down');
  } else {
    console.log('up');
  }
  if (e.originalEvent.deltaX > 0) {
    console.log('right');
  } else {
    console.log('left');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 style="white-space:nowrap;overflow:scroll">
🚂🚃🚃🚂🚃🚃🚃🚂🚃🚃🚂🚃🚃🚃🚂🚃<br/>
🚎🚌🚌🚌🚎🚌🚌🚎🚌🚌🚌🚎🚌🚌🚎🚌<br/>
🚂🚃🚃🚂🚃🚃🚃🚂🚃🚃🚂🚃🚃🚃🚂🚃<br/>
🚎🚌🚌🚌🚎🚌🚌🚎🚌🚌🚌🚎🚌🚌🚎🚌<br/>
🚂🚃🚃🚂🚃🚃🚃🚂🚃🚃🚂🚃🚃🚃🚂🚃<br/>
🚎🚌🚌🚌🚎🚌🚌🚎🚌🚌🚌🚎🚌🚌🚎🚌<br/>
</h1>

wheelความเข้ากันได้ของเบราว์เซอร์ของเหตุการณ์ใน MDN's (2019-03-18) :

ความเข้ากันได้ของเหตุการณ์ล้อ


รหัสด้านบนสร้างบันทึกของคอนโซลสองรายการใช้สิ่งต่อไปนี้เพื่อแยกออกขึ้น / ลง / ซ้าย / ขวาอย่างสมบูรณ์: if(e.originalEvent.deltaY > 0) { console.log('down'); } else if(e.originalEvent.deltaY < 0) { console.log('up'); } else if(e.originalEvent.deltaX > 0) { console.log('right'); } else if(e.originalEvent.deltaX < 0) { console.log('left'); }
Don Wilson

สำหรับtouchmoveเหตุการณ์การใช้งานมือถือแทน
CPHPython

1

คุณสามารถใช้สิ่งนี้ได้เช่นกัน

$(document).ready(function(){

  var currentscroll_position = $(window).scrollTop();
$(window).on('scroll', function(){
Get_page_scroll_direction();
});

function Get_page_scroll_direction(){
  var running_scroll_position = $(window).scrollTop();
  if(running_scroll_position > currentscroll_position) {
      
      $('.direction_value').text('Scrolling Down Scripts');

  } else {
       
       $('.direction_value').text('Scrolling Up Scripts');

  }
  currentscroll_position = running_scroll_position;
}

});
.direction_value{
  position: fixed;
  height: 30px;
  background-color: #333;
  color: #fff;
  text-align: center;
  z-index: 99;
  left: 0;
  top: 0;
  width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="direction_value">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>


0

ใน.data()องค์ประกอบคุณสามารถจัดเก็บ JSON และทดสอบค่าเพื่อเริ่มกิจกรรม

{ top : 1,
   first_top_event: function(){ ...},
   second_top_event: function(){ ...},
   third_top_event: function(){ ...},
   scroll_down_event1: function(){ ...},
   scroll_down_event2: function(){ ...}
}

0

การตรวจจับนี้ง่ายและสะดวกเมื่อผู้ใช้เลื่อนออกจากด้านบนของหน้าและเมื่อกลับไปที่ด้านบน

$(window).scroll(function() {
    if($(window).scrollTop() > 0) {
        // User has scrolled
    } else {
        // User at top of page
    }
});

0

นี่เป็นทางออกที่ดีที่สุดในการตรวจจับทิศทางเมื่อผู้ใช้เลื่อนลง

var currentScrollTop = 0 ;

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

    scrollTop = $(this).scrollTop();

    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {

        if(scrollTop > currentScrollTop){
            // downscroll code
            $('.mfb-component--bl').addClass('mfbHide');
        }else{
            // upscroll code
            $('.mfb-component--bl').removeClass('mfbHide');
        }
        currentScrollTop = scrollTop;

    }, 250));

});

0

คุณควรลองสิ่งนี้

var scrl
$(window).scroll(function(){
        if($(window).scrollTop() < scrl){
            //some code while previous scroll
        }else{
            if($(window).scrollTop() > 200){
                //scroll while downward
            }else{//scroll while downward after some specific height
            }
        }
        scrl = $(window).scrollTop();
    });

0

ฉันมีปัญหากับการเลื่อนแบบยืดหยุ่น (การตีกลับด้วยการเลื่อนแถบยาง) ไม่สนใจเหตุการณ์เลื่อนลงหากใกล้กับส่วนบนของหน้าทำงานสำหรับฉัน

var position = $(window).scrollTop();
$(window).scroll(function () {
    var scroll = $(window).scrollTop();
    var downScroll = scroll > position;
    var closeToTop = -120 < scroll && scroll < 120;
    if (downScroll && !closeToTop) {
        // scrolled down and not to close to top (to avoid Ipad elastic scroll-problems)
        $('.top-container').slideUp('fast');
        $('.main-header').addClass('padding-top');
    } else {
        // scrolled up
        $('.top-container').slideDown('fast');
        $('.main-header').removeClass('padding-top');
    }
    position = scroll;
});

0

สิ่งนี้ใช้ได้กับเบราว์เซอร์พีซีหรือโทรศัพท์ทุกประเภทขยายคำตอบยอดนิยม หนึ่งสามารถสร้างหน้าต่างวัตถุเหตุการณ์ที่ซับซ้อนมากขึ้น ["scroll_evt"] แล้วเรียกมันในฟังก์ชั่น handleScroll () สิ่งนี้ทริกเกอร์สำหรับ 2 เงื่อนไขที่เกิดขึ้นพร้อมกันหากการหน่วงเวลาบางอย่างผ่านไปหรือเดลต้าบางตัวถูกส่งผ่านเพื่อกำจัดทริกเกอร์ที่ไม่ต้องการ

window["scroll_evt"]={"delta":0,"delay":0,"direction":0,"time":Date.now(),"pos":$(window).scrollTop(),"min_delta":120,"min_delay":10};
$(window).scroll(function() {

    var currentScroll = $(this).scrollTop();
    var currentTime = Date.now();
    var boolRun=(window["scroll_evt"]["min_delay"]>0)?(Math.abs(currentTime - window["scroll_evt"]["time"])>window["scroll_evt"]["min_delay"]):false;
    boolRun = boolRun && ((window["scroll_evt"]["min_delta"]>0)?(Math.abs(currentScroll - window["scroll_evt"]["pos"])>window["scroll_evt"]["min_delta"]):false);
    if(boolRun){
        window["scroll_evt"]["delta"] = currentScroll - window["scroll_evt"]["pos"];
        window["scroll_evt"]["direction"] = window["scroll_evt"]["delta"]>0?'down':'up';
        window["scroll_evt"]["delay"] =currentTime - window["scroll_evt"]["time"];//in milisecs!!!
        window["scroll_evt"]["pos"] = currentScroll;
        window["scroll_evt"]["time"] = currentTime;
        handleScroll();
    }
});


function handleScroll(){
    event.stopPropagation();
    //alert(window["scroll_evt"]["direction"]);
    console.log(window["scroll_evt"]);
}
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.