媒体查询垂直滚动

Question

有没有一种方法来检测与媒体查询垂直滚动的距离？

看来，媒体查询检测周围介质（右令人震惊：P）设计，所以像浏览器的高度是可测试的，但没有具体多远向下滚动页面时。

如果是不可能的，但你知道JS（不是jQuery的）的方式随意张贴！

Answer 1

我不相信这是可能使用CSS媒体查询，但我知道的是，滚动高度可以使用JavaScript window.pageYOffset被发现。如果你想通过一个函数在每次用户向上或向下滚动页面上的时间来运行这个值，你可以不喜欢

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

或者只是：

window.onscroll = scrollFunctionHere; 

如果函数本身检查的window.pageYOffset值。

有关如何做使用window.onscroll在JavaScript有效，是指mynameistechno's answer更多的建议。

关于效率的重要注意事项：每次运行一个函数时，如果在回调中执行了任何不平凡的事情，则发出滚动事件可能会破坏CPU周期。相反，最好每次只允许回调运行很多次。这被称为“debouncing”。

简单的去抖滚动事件处理程序下面的代码。请注意文本“Hello”和“世界”每250毫秒之间如何切换，而不是每一个帧：

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

首先，公认的答案无效。

正确名称是

window.onscroll 

，而不是

window.onScroll 

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

第二，这是可怕的低效的，因为函数被调用比它需要的方式更多，可以使滚动时页面laggy。从约翰Resig的：

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

好得多使用运行每隔150毫秒左右的计时器 - 喜欢的事：

var scrolled = false; 

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

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

Answer 3

jQuery中你有方法.scrollTop（）

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

这个例子使与窗口滚动一个div滚动。

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