медиа-запрос для вертикальной прокрутки

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 при прокрутке. От Резиг:

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()) 
});