Как узнать, присутствует ли в браузере полоса прокрутки или нет в responsejs?

Question

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

Answer 1

Вы можете сравнить высоту вашего контента с высотой окна. Так что if (document.body.offsetHeight > window.innerHeight) тогда будет видна полоса прокрутки.

UPD: Относительно размеров полосы прокрутки. Его ширина - это просто разница между window.innerWidth и document.body.offsetWidth, а высота равна window.innerHeight. Итак, подведем итог:

let scrollbarSize = {
  heigth: window.innerHeight,
  width: window.innerWidth - document.body.offsetWidth
}

Answer 2

В этой песочнице я протестировал два возможных решения. Первый подход (ScrollableComponent и hook useIsScrollable) основан на попытке прокрутки с помощью элемента. Если он что-то делает, то вы знаете, что у него есть полоса прокрутки. Второй подход основан на измерении (ScrollableComponentA и ловушка useIsScrollableA). Измерьте элемент обертки и внутренний элемент и сравните его высоту и ширину.

Answer 3

Я бы предпочел комментарий, но у меня пока нет к нему доступа.

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

Чтобы узнать, отображает ли ваш браузер вертикальную полосу прокрутки. Сравните высоту документа и высоту экрана.

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

let scrollHeight = Math.max(
  document.body.scrollHeight, document.documentElement.scrollHeight,
  document.body.offsetHeight, document.documentElement.offsetHeight,
  document.body.clientHeight, document.documentElement.clientHeight
);

Чтобы вычислить высоту вашего окна, используйте:

const windowHeight = documentElement.clientHeight

Если ваш scrollHeight больше, чем windowHeight, то вы можете быть уверены, что вертикальная полоса прокрутки присутствует,Поэтому было бы легко обнаружить