truy vấn phương tiện cho cuộn dọc

Question

Có cách nào để phát hiện khoảng cách cuộn dọc với truy vấn phương tiện không?

Dường như các truy vấn phương tiện được thiết kế xung quanh phát hiện phương tiện (gây sốc phải: P) vì vậy những thứ như chiều cao trình duyệt có thể kiểm tra, nhưng không cụ thể cách cuộn xuống dưới trang.

Nếu không thể, nhưng bạn biết một cách trong JS (không phải jQuery) cảm thấy tự do để đăng bài!

Answer 1

Tôi không tin rằng có thể có truy vấn phương tiện CSS, nhưng tôi biết rằng chiều cao cuộn có thể được tìm thấy trong JavaScript bằng cách sử dụng window.pageYOffset. Nếu bạn muốn chạy giá trị này thông qua một chức năng mỗi khi người dùng cuộn lên hoặc xuống trên một trang, bạn có thể làm một cái gì đó giống như

window.onscroll = function() { 
    scrollFunctionHere(window.pageYOffset); 
}; 

Hoặc chỉ:

window.onscroll = scrollFunctionHere; 

Nếu chức năng tự kiểm tra giá trị của window.pageYOffset.

Để được tư vấn thêm về cách sử dụng window.onscroll hiệu quả trong JavaScript, hãy tham khảo mynameistechno's answer.

Lưu ý quan trọng về hiệu quả: chạy một hàm mỗi lần một sự kiện cuộn được phát ra có thể xé qua các chu kỳ CPU nếu bất kỳ điều gì không tầm thường được thực hiện trong cuộc gọi lại. Thay vào đó, thực hành tốt là chỉ cho phép gọi lại để chạy quá nhiều lần mỗi giây. Điều này đã được gọi là "debouncing".

Mã trình xử lý sự kiện cuộn được đánh dấu đơn giản dưới đây. Chú ý các văn bản Toggles giữa "HELLO" và "WORLD" mỗi 250ms, chứ không phải là mỗi khung duy nhất:

var outputTo = document.querySelector(".output"); 
 
var timeout_debounce; 
 

 
window.addEventListener("scroll", debounce); 
 

 
function debounce(event) { 
 
    if(timeout_debounce) { 
 
     return; 
 
    } 
 

 
    timeout_debounce = setTimeout(clearDebounce, 250); 
 
// Pass the event to the actual callback. 
 
    actualCallback(event); 
 
} 
 

 
function clearDebounce() { 
 
    timeout_debounce = null; 
 
} 
 

 
function actualCallback(event) { 
 
// Perform your logic here with no CPU hogging. 
 
    outputTo.innerText = outputTo.innerText === "HELLO" 
 
    ? "WORLD" 
 
    : "HELLO"; 
 
}

p { 
 
    padding: 40vh; 
 
    margin: 20vh; 
 
    background: blue; 
 
    color: white; 
 
}

<p class="output">Test!</p>

Answer 2

Trước hết, câu trả lời được chấp nhận không hoạt động.

Tên đúng là

window.onscroll 

và không

window.onScroll 

https://developer.mozilla.org/en-US/docs/Web/API/window.onscroll

Thứ hai, đây là hiệu quả khủng khiếp như hàm được gọi cách hơn nó cần phải và có thể làm cho độ trễ trang khi được cuộn. Từ John Resig:

http://ejohn.org/blog/learning-from-twitter/

Tốt hơn để sử dụng một bộ đếm thời gian chạy mỗi 150 ms hoặc lâu hơn - một cái gì đó như:

var scrolled = false; 

window.onscroll = function() { 
    scrolled = true; 
} 

setInterval(function(){ 
    if (scrolled) { 
    scrolled = false; 
    // scrollFunction() 
    } 
}, 150); 

Answer 3

Trong Jquery bạn có phương pháp .scrollTop()

http://api.jquery.com/scrolltop/

Ví dụ này tạo cuộn div với cuộn cửa sổ.

$(window).scroll(function(){    
     $("div").css("margin-top", $(window).scrollTop()) 
});