CSS: есть ли способ нацелиться на элемент только тогда, когда отображаются полосы прокрутки?

Question

У меня была вертикальная рамка прокрутки с центрированной черной рамкой, но при тестировании в Windows она покрывалась полосами прокрутки, поэтому мне пришлось добавить к ней больше отступов. Теперь на окнах это выглядит хорошо, так как есть место для прокрутки, и черный ящик отцентрирован (https://i.imgur.com/ZCK9WPj.png). Но теперь на Mac, так как полосы прокрутки не отображаются, есть тонна дополнительного пространства с правой стороны, прежде чем разделительная линия покажет (https://imgur.com/a/3q3Kt17).
Есть ли способ решить это чисто?

Answer 1

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

const element = document.querySelector('.scroll-container')

if(element.clientHeight > element.scrollHeight) {
  element.classList.add('scroll-active')
}
else {
  element.classList.remove('scroll-active')
}

Answer 2

Вы должны попытаться определить, есть ли в окне полоса прокрутки с Javascript

if ((window.innerWidth - document.documentElement.clientWidth) > 0) {
  // Do some stuff like
  document.body.classList.add('withScrollbar')
}