ตรวจจับว่าผู้ใช้กำลังเลื่อนหรือไม่


88

ฉันจะตรวจจับใน javascript ได้อย่างไรหากผู้ใช้กำลังเลื่อน?


if(scolling)ไม่ฉันต้องการจากฟังก์ชั่นอื่นที่จะเขียน เป็นif(window.onscroll)เหมือนกันไหม?
user1365010

คุณสามารถตั้งค่าscrollingในไฟล์onscroll. (ps: ไม่นั่นไม่เหมือนกัน)
Rocket Hazmat

3
ผู้ใช้ไม่เคย "กำลังเลื่อน" มีเพียงการเลื่อนเท่านั้นไม่ใช่สถานะการเลื่อน
Kendall Frey

1
@ user1365010: ดิ! ฉันไม่ได้คิดถึงเรื่องนั้น คุณกำลังพยายามทำอะไรกันแน่? ทำไมคุณต้องรู้ว่าผู้ใช้กำลังเลื่อนอยู่?
Rocket Hazmat

2
น่าสนใจ. ฉันไม่เคย 'รีบูต' การเลื่อน สนใจที่จะทำอย่างละเอียด?
Kendall Frey

คำตอบ:


88

งานนี้:

window.onscroll = function (e) {  
// called when the window is scrolled.  
} 

แก้ไข:

คุณบอกว่านี่เป็นฟังก์ชันใน TimeInterval ..
ลองทำดังนี้:

userHasScrolled = false;
window.onscroll = function (e)
{
    userHasScrolled = true;
}

จากนั้นภายในช่วงเวลาของคุณให้แทรกสิ่งนี้:

if(userHasScrolled)
{
//do your code here
userHasScrolled = false;
}

แต่เป็นฟังก์ชันใน setInterval!
user1365010

4
@ user1365010: คืออะไร? คุณกำลังพูดถึงอะไร? คุณต้องเพิ่มรายละเอียดให้กับคำถาม
Rocket Hazmat

6
@ user1365010 คำตอบนี้คือสิ่งที่ดีที่สุดที่คุณสามารถทำได้
Matt Ball

#FYI ดูเหมือนว่ามันจะไม่ตื่นเมื่อคอนเทนเนอร์กำลังเลื่อน body.scroll () ใช้งานได้ดังนั้นฉันจึงเพิ่มทั้งสองอย่าง
Selva Ganapathi

11

คุณเพิ่งพูดจาวาสคริปต์ในแท็กของคุณดังนั้นโพสต์ @Wampie Driessen สามารถช่วยคุณได้

ฉันต้องการมีส่วนร่วมด้วยดังนั้นคุณสามารถใช้สิ่งต่อไปนี้เมื่อใช้ jQuery ได้หากต้องการ

 //Firefox
 $('#elem').bind('DOMMouseScroll', function(e){
     if(e.detail > 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });

 //IE, Opera, Safari
 $('#elem').bind('mousewheel', function(e){
     if(e.wheelDelta< 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });

ตัวอย่างอื่น:

$(function(){
    var _top = $(window).scrollTop();
    var _direction;
    $(window).scroll(function(){
        var _cur_top = $(window).scrollTop();
        if(_top < _cur_top)
        {
            _direction = 'down';
        }
        else
        {
            _direction = 'up';
        }
        _top = _cur_top;
        console.log(_direction);
    });
});​

2
jQuery ไม่ควรแยกความแตกต่างของเบราว์เซอร์ใช่หรือไม่? ทำไมคุณถึงมีวิธีการสำหรับเบราว์เซอร์ที่แตกต่างกัน? คือ$('#elem').bind('scroll'ไม่ดีพอ? แก้ไข: ไม่เป็นไรฉันเห็นตัวอย่างที่ 2 ของคุณแล้ว
Rocket Hazmat

1
ไม่มีอะไรผิดปกติกับจาวาสคริปต์พื้นเมืองเล็กน้อยทุก ๆ ครั้ง
AGDM

คุณไม่ได้หมายถึงe.originalEvent.wheelDelta || e.originalEvent.detail?
JacobRossDev

2
คำเตือน:เหตุการณ์วงล้อในคำตอบนี้ไม่เป็นมาตรฐานและเลิกใช้แล้ว ใช้wheelเหตุการณ์
Alexander O'Mara

ฉันยังไม่ได้ทดสอบ แต่ตาม MDN DOMMouseScroll ไม่ได้รับการสนับสนุนในนักพัฒนา
mozilla.org/en-US/docs/Web/Events/DOMMouseScroll

6
window.addEventListener("scroll",function(){
    window.lastScrollTime = new Date().getTime()
});
function is_scrolling() {
    return window.lastScrollTime && new Date().getTime() < window.lastScrollTime + 500
}

เปลี่ยน 500 เป็นจำนวนมิลลิวินาทีหลังจากเหตุการณ์เลื่อนสุดท้ายที่คุณถือว่าผู้ใช้ "ไม่เลื่อนอีกต่อไป"

( addEventListenerดีกว่าonScrollเพราะเดิมสามารถอยู่ร่วมกันได้อย่างดีกับรหัสอื่น ๆ ที่ใช้onScroll)


0

ใช้ช่วงเวลาเพื่อตรวจสอบ

คุณสามารถตั้งค่าช่วงเวลาเพื่อตรวจสอบต่อไปว่าผู้ใช้เลื่อนแล้วทำอะไรตามนั้น

ยืมมาจากJohn Resigผู้ยิ่งใหญ่ในบทความของเขาบทความของเขา

ตัวอย่าง:

    let didScroll = false;

    window.onscroll = () => didScroll = true;

    setInterval(() => {
        if ( didScroll ) {
            didScroll = false;
            console.log('Someone scrolled me!')
        }
    }, 250);

ดูตัวอย่างสด

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.