Определение того, сколько пользователь прокрутил

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

Это текущий CSS что позиционирует это:

div#enlargedImgWrapper {
    position: absolute;
    top: 30px;
    left: 55px;
    z-index: 999;
}

Теперь проблема в том, что, если я нажму на изображение внизу страницы, окно все равно появится в верхнем левом углу страницы, где я не смогу его увидеть, пока не прокручиву назад. Мне нужно, чтобы он отображался относительно окна независимо от его текущей позиции относительно документа.

Примечание: я не хочу использовать position: fixed; так как некоторые изображения могут быть выше экрана, поэтому я хочу, чтобы пользователи могли также прокручивать изображение.

Моя идея состояла в том, чтобы использовать JS, чтобы изменить top значение:

var scrollValue = ???;
document.getElementById('enlargedImgWrapper').style.top = scrollValue+30 + 'px';

Как я могу определить, насколько пользователь прокрутил страницу вниз (var scrollValue)?
Или есть "лучший" способ сделать это?

Изменить: если возможно, я хотел бы сделать это без JQuery.

Источник

3 ответа

Решение

Чистый JavaScript использует scrollTop а также scrollLeft:

var scrollLeft = (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;

https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollTop

jQuery версия:

var scrollLeft = $(window).scrollLeft() ;
var scrollTop = $(window).scrollTop() ;

Что вам нужно, это:

document.getElementById('enlargedImgWrapper').style.top = (scrollTop+30) + 'px';
Источник 
document.getElementById('enlargedImgWrapper').scrollTop;

MSDN

Значение этого свойства равно текущему вертикальному смещению содержимого в пределах диапазона с прокруткой. Хотя вы можете установить для этого свойства любое значение, если вы присваиваете значение меньше 0, для свойства устанавливается значение 0. Если вы присваиваете значение, превышающее максимальное значение, для свойства устанавливается максимальное значение.

Вы можете установить это свойство встроенным, но результаты могут быть противоречивыми во время загрузки документа.

свойство scrollTop

Источник

Попытайся

      console.log('Current Scroll (X/Y)', window.pageXOffset, window.pageYOffset);

Вы можете найти здесь, сколько прокрутки по горизонтали и по вертикали сверху.

Вот полная документация о прокрутке: https://javascript.info/size-and-scroll-window

Источник
Другие вопросы по тегам