CSS 垂直滚动的媒体查询
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16922731/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
media query for vertical scroll
提问by Don P
Is there a way to detect vertical scroll distance with a media query?
有没有办法通过媒体查询检测垂直滚动距离？
It seems that media queries are designed around detecting the medium (shocking right :P) so things like browser height are testable, but not specifically how far down the page is scrolled.
媒体查询似乎是围绕检测媒体而设计的（令人震惊的是：P），因此诸如浏览器高度之类的内容是可测试的，但并未具体说明页面向下滚动的程度。
If is not possible, but you know a way in JS (not jQuery) feel free to post!
如果不可能，但您知道 JS（不是 jQuery）中的一种方法，请随时发布！
采纳答案by Don P
I don't believe it's possible with a CSS media query, but I do know that the scroll height can be found in JavaScript using window.pageYOffset. If you wanted to run this value through a function every time the users scrolled up or down on a page, you could do something like
我不相信使用 CSS 媒体查询是可能的，但我知道滚动高度可以在 JavaScript 中使用window.pageYOffset. 如果您想在每次用户在页面上向上或向下滚动时通过函数运行此值，您可以执行以下操作
window.onscroll = function() {
scrollFunctionHere(window.pageYOffset);
};
Or just:
要不就：
window.onscroll = scrollFunctionHere;
If the function itself checked the value of window.pageYOffset.
如果函数本身检查了 的值window.pageYOffset。
For more advice on how to do use window.onscrollefficiently in JavaScript, refer to mynameistechno's answer.
有关如何window.onscroll在 JavaScript 中高效使用的更多建议，请参阅mynameistechno 的回答。
Important note on efficiency: running a function every single time a scroll event is emitted can tear through CPU cycles if anything non-trivial is performed in the callback. Instead, it is good practice to only allow a callback to run so many times per second. This has been termed "debouncing".
关于效率的重要说明：如果在回调中执行了任何非平凡的事情，则每次发出滚动事件时运行一个函数可能会破坏 CPU 周期。相反，最好每秒只允许回调运行这么多次。这被称为“去抖动”。
Simple debounced scroll event handler code below. Notice how the text toggles between "HELLO" and "WORLD" every 250ms, rather than every single frame:
下面的简单去抖动滚动事件处理程序代码。请注意文本如何每 250 毫秒在“HELLO”和“WORLD”之间切换，而不是每帧：
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>回答by mynameistechno
First off, the accepted answer doesn't work.
首先，接受的答案不起作用。
The correct name is
正确的名字是
window.onscroll
and not
并不是
window.onScroll
https://developer.mozilla.org/en-US/docs/Web/API/window.onscroll
https://developer.mozilla.org/en-US/docs/Web/API/window.onscroll
Second, this is horribly inefficient as the function is called way more than it needs to and can make the page laggy when scrolled. From John Resig:
其次，这是非常低效的，因为该函数被调用的次数超出了它的需要，并且在滚动时会使页面滞后。来自约翰·雷西格：
http://ejohn.org/blog/learning-from-twitter/
http://ejohn.org/blog/learning-from-twitter/
Much better to use a timer that runs every 150 ms or so - something like:
使用每 150 毫秒左右运行一次的计时器要好得多 - 例如：
var scrolled = false;
window.onscroll = function() {
scrolled = true;
}
setInterval(function(){
if (scrolled) {
scrolled = false;
// scrollFunction()
}
}, 150);
回答by Santi Nunez
In Jquery you have the method .scrollTop()
在 Jquery 你有方法 .scrollTop()
http://api.jquery.com/scrolltop/
http://api.jquery.com/scrolltop/
This example make a div scroll with the window scroll.
此示例使 div 滚动与窗口滚动。
$(window).scroll(function(){
$("div").css("margin-top", $(window).scrollTop())
});
