JS рассчитать текущий центр экрана

Question

Я много искал, но не смог найти нужный ответ. У меня есть JS скрипт, который показывает изображение, когда фиксированный элемент наведен. Однако я бы хотел, чтобы изображение всегда было в центре экрана, независимо от того, где пользователь прокручивает. Как я могу достичь этого?

Моя JS функция:

$(document).ready(function($) {
      $('.trigger').mouseover(function() {
       // find our span
       var elem = $(this).siblings('span');

        // get our img url
       var src = elem.attr('data-original');


        // change span to img using the value from data-original
       elem.replaceWith('<img src="' + src + '"width="400" style="display:block;position:absolute;top: 0; left: 0; bottom: 0; right: 0;margin: auto;"/>');

      });

      $('.trigger').mouseout(function() {
       // find our span
       var elem = $(this).siblings('img');

        // get our img url
       var src = elem.attr('src');

        // change img to span using the value from data-original
       elem.replaceWith('<span data-original="'+src+'"></span>');
      });
    });

JSFiddle: https://jsfiddle.net/rbmd6a39/

Я могу получить смещение от верхней части страницы, используя

window.pageYOffset;

Но я не знаю, куда поместить это значение, чтобы оно было в центре.

Answer 1

Вы можете задать стили изображения, которые бы зафиксировали его в центре экрана. Нет необходимости в JS там.

Теперь также работает с очень большими изображениями с max-width, max-height и object-fit: contain!

.always-centered {
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  transform: translate(-50%, -50%);
  z-index: 99;
}

Answer 2

На самом деле вам не нужно использовать JavaScript для его центрирования. Вы можете использовать position: fixed и центрировать с помощью left: 50%; transform: translateX(-50%); в CSS, что будет менее требовательным к клиентскому компьютеру.

Использование JS, однако, это будет почти то же самое: изображение должно было бы быть фиксированным, и вы бы определили left как половину области просмотра минус половина ширины вашего изображения.

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