垂直滚动的媒体查询

Question

有没有办法通过媒体查询检测垂直滚动距离？

似乎媒体查询是围绕检测媒体而设计的(令人震惊的权利:P)所以浏览器高度之类的东西是可测试的,但不具体到页面滚动的距离.

如果不可能,但你知道JS(不是jQuery)的方式随意发布!

Answer 1

首先,接受的答案不起作用.

正确的名字是

window.onscroll

并不是

window.onScroll

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

其次,这是非常低效的,因为函数被调用的方式超出了它的需要,并且可以在滚动时使页面滞后.来自John 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 2

我不相信CSS媒体查询是可能的,但我知道可以在JavaScript中找到滚动高度window.pageYOffset.如果您希望每次用户在页面上向上或向下滚动时都通过函数运行此值,您可以执行类似的操作

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

要不就:

window.onscroll = scrollFunctionHere;

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

有关如何window.onscroll在JavaScript中有效使用的更多建议,请参阅mynameistechno的答案.

关于效率的重要注意事项:如果在回调中执行任何非常重要的事情,则每次发出滚动事件时运行一个函数都会破坏CPU周期.相反,最好只允许回调每秒运行这么多次.这被称为"去抖动".

下面简单的debounced滚动事件处理程序代码.注意文本如何每隔250ms在"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>