Divni markazlashtirish: qiyinchiliklar va yechimlar

Divni markazlashtirish uchun avvalgi usullar juda murakkab edi. Buning uchun quyidagi kod ishlatilardi:

.thing {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Endi, bu ishni bajarish ancha oson. Quyidagi kod ishlatiladi:

body {
display: grid;
min-height: 100dvh;
place-items: center;
}

.thing {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Biroq, agar brauzerda sidebar bo'lsa, bu usul ishlmaydi. Chunki, div brauzer sahifasining markazida emas, balki sidebar ichida markazda joylashadi.

Bu muammoni hal qilish uchun, JavaScript kodidan foydalaniladi. Quyidagi kod brauzer sahifasining kengligini va webview kengligini hisoblaydi:

body {
  display: grid;
  min-height: 100dvh;
  place-items: center;
}

const browserChrome = window.outerWidth - window.innerWidth;

Keyin, divni markazlashtirish uchun kerakli shift hisoblanadi:

window.innerWidth // the webview
window.outerWidth // the whole browser window
const browserChrome = window.outerWidth - window.innerWidth;

const shift = -browserChrome / 2;

Divga ushbu shift qiymati beriladi:

const shift = -browserChrome / 2;

.site {
translate: var(--window-center-shift, 0px);
}

Biroq, agar DevTools ochilgan bo'lsa, bu usul ham ishlmaydi. Chunki, DevTools brauzer sahifasining kengligini o'zgartiradi.

.site {
  translate: var(--window-center-shift, 0px);
}

Ushbu muammoni hal qilish uchun, pointer eventdan foydalaniladi. Pointer event brauzer sahifasining chap va o'ng chegaralarini hisoblaydi:

const viewportLeft = event.screenX - event.clientX * scale;
const viewportRight = viewportLeft + innerWidth * scale;
const left = viewportLeft - window.screenX;
const right = window.screenX + outerWidth - viewportRight;
const shift = (right - left) / (2 * scale);

const viewportLeft = event.screenX - event.clientX * scale;
const viewportRight = viewportLeft + innerWidth * scale;

const left = viewportLeft - window.screenX;
const right = window.screenX + outerWidth - viewportRight;
const shift = (right - left) / (2 * scale);

Firefox brauzerida ushbu qiymatlar bevosita olinadi. Chromium brauzerida esa, bu qiymatlar pointer event orqali hisoblanadi.

Asl manba: seg6.space