web-dev-qa-db-ja.com

垂直スクロールのメディアクエリ

メディアクエリで垂直スクロール距離を検出する方法はありますか？

メディアクエリは、メディアの検出（衝撃的な右：P）を中心に設計されているため、ブラウザの高さなどをテストできますが、ページをどれだけ下にスクロールしたかはわかりません。

可能ではないが、JS（jQueryではない）の方法を知っている場合は、遠慮なく投稿してください！

cssmedia-queries
22
Don P

CSSメディアクエリでは可能ではないと思いますが、JavaScriptでwindow.pageYOffsetを使用してスクロールの高さを確認できることは知っています。ユーザーがページを上下にスクロールするたびにこの値を関数で実行したい場合は、次のようにします。

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

あるいは単に：

window.onscroll = scrollFunctionHere;

関数自体がwindow.pageYOffsetの値をチェックした場合。

JavaScriptでwindow.onscrollを効率的に使用する方法の詳細については、 mynameistechnoの回答 を参照してください。

効率に関する重要な注意：スクロールイベントが発生するたびに関数を実行すると、コールバックで重要でないものが実行されると、CPUサイクルが中断する可能性があります。代わりに、1秒間に何度もコールバックを実行できるようにすることをお勧めします。これは「デバウンス」と呼ばれています。

以下の簡単なデバウンススクロールイベントハンドラーコード。テキストが1フレームごとではなく、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>
11
user1846065

まず、受け入れられた回答が機能しません。

正しい名前は

window.onscroll

ではなく

window.onScroll

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

第2に、関数は必要以上に呼び出され、スクロールするとページが遅れる可能性があるため、これはひどく非効率的です。 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);
23
mynameistechno

Jqueryにはメソッド.scrollTop（）があります

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

この例では、ウィンドウをスクロールしてdivをスクロールします。

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