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

Question

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

メディアクエリはメディアを検出するように設計されているようです (衝撃的です:P) ブラウザの高さなどはテスト可能ですが、具体的にはページがどれだけ下にスクロールされるかはテストできません.

可能ではありませんが、JS (jQuery ではない) での方法を知っている場合は、お気軽に投稿してください。

Answer 1

CSS メディア クエリでそれが可能だとは思いませんが、スクロールの高さは JavaScript でwindow.pageYOffset. ユーザーがページを上下にスクロールするたびにこの値を関数で実行したい場合は、次のようにすることができます

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

あるいは単に：

window.onscroll = scrollFunctionHere;

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

window.onscrollJavaScript で効率的に使用する方法の詳細については、 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>

Answer 2

Jquery にはメソッド .scrollTop() があります

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

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

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