Подтвердить что ты не робот

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

Есть ли способ обнаружить вертикальное расстояние прокрутки с помощью медиа-запроса?

Кажется, что медиа-запросы спроектированы вокруг обнаружения среды (шокирующие права: P), поэтому такие вещи, как высота браузера, можно тестировать, но не конкретно, как далеко прокручивается страница.

Если это невозможно, но вы знаете способ в JS (не jQuery), не стесняйтесь публиковать сообщения!

Ответ 1

Я не думаю, что это возможно с помощью мультимедийного запроса CSS, но я знаю, что высоту прокрутки можно найти в JavaScript с помощью window.pageYOffset. Если вы хотите запускать это значение с помощью функции каждый раз, когда пользователи прокручивали вверх или вниз по странице, вы могли бы сделать что-то вроде

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

Или просто:

window.onscroll = scrollFunctionHere;

Если сама функция проверила значение window.pageYOffset.

Подробнее о том, как эффективно использовать window.onscroll в JavaScript, см. mynameistechno answer.

Важное примечание об эффективности: запуск функции каждый раз, когда выдается событие прокрутки, может прорваться через циклы CPU, если в обратном вызове выполняется что-то нетривиальное. Вместо этого, это хорошая практика, чтобы разрешить обратный вызов работать столько раз в секунду. Это называется "debouncing".

Простой дебютный код обработчика прокрутки ниже. Обратите внимание, что текст переключается между "HELLO" и "WORLD" каждые 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>

Ответ 2

Во-первых, принятый ответ не работает.

Правильное имя

window.onscroll

а не

window.onscroll

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

Во-вторых, это ужасно неэффективно, поскольку функция называется способом больше, чем нужно, и может сделать страницу ломающейся при прокрутке. От Джона Ресига:

http://ejohn.org/blog/learning-from-twitter/

Гораздо лучше использовать таймер, который запускается каждые 150 мс или около того - что-то вроде:

var scrolled = false;

window.onscroll = function() {
  scrolled = true;
}

setInterval(function(){
  if (scrolled) {
    scrolled = false;
    // scrollFunction()
  }
}, 150);

Ответ 3

В JQuery у вас есть метод .scrollTop()

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

В этом примере сделайте прокрутку div с прокруткой окна.

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