Блог

Итак, я хочу иметь центральный div, который является полноэкранным, и сделать ширину и высоту корпуса 150 vw и vh с запасом в 50%, чтобы при загрузке страницы он удерживал div в центре, но вы могли прокручивать вверх, вниз, влево, вправо, за пределыэтот центральный div немного.

Если вы делаете div 100vw, 100vh, а затем тело 200vw, 200vh, это позволяет прокручивать только вправо и вниз.

Это мое понимание того, как добраться до того, что я пытаюсь сделать:

HTML:

 <div>
centered and full screen div?
</div>

</body>
  

CSS:

 body{
 width:150vw;
 margin-left:50vw;
 height:150vh;
 margin-top:50vh;
}

div{
 width: 100vw;
 height: 100vh;
 border: solid;
}
  

JAVA:

 window.scrollTo(50   'vw', 50   'vh');
  

https://jsfiddle.net/dsLnzyxw/3/

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

Также понимаю, что я, возможно, иду по сумасшедшему маршруту, пытаясь достичь чего-то, что можно было бы сделать довольно просто в css?

Как мне этого добиться?

Спасибо!

Чтобы получить единицы измерения относительно ширины и высоты окна просмотра (vw и vh), вы можете выполнить простые вычисления:

 window.scrollTo(0.5 * window.innerWidth, 0.5*window.innerHeight);
  

который установил бы положение прокрутки на 50% от ширины окна и 50% от высоты окна. window.innerWidth возвращает ширину окна, и это умножается на 50%, чтобы получить 50% от ширины окна в пикселях.
То же самое касается высоты. К сожалению, установка положения прокрутки невозможна без JavaScript.