Входит ли в размер viewport вертикальный скролл

Входит ли вертикальный скролл в размер viewport

Краткий ответ

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

Размер viewport в JavaScript

window.innerWidth — это ширина viewport ВКЛЮЧАЯ вертикальный скролбар. Нет, погодите — это сложнее.

// window.innerWidth НЕ включает вертикальный скролбар
// window.innerWidth — это ширина видимой области (viewport)
console.log(window.innerWidth);  // Например: 1920

// window.outerWidth — это ширина окна браузера ВСЕ (с боковыми панелями)
console.log(window.outerWidth);  // Например: 1920

// документ может быть шире viewport (если есть горизонтальный скролл)
console.log(document.documentElement.clientWidth);  // Ширина БЕЗ скролбара

Практическое объяснение

Вертикальный скролбар занимает место в окне браузера и уменьшает доступную ширину:

// На типичном браузере:
// Окно браузера: 1920px
// Вертикальный скролбар: примерно 15-17px
// Доступная ширина для контента: примерно 1903-1905px

const screenWidth = window.innerWidth;           // 1920
const scrollbarWidth = window.innerWidth - 
                       document.documentElement.clientWidth;

console.log('Ширина скролбара:', scrollbarWidth);  // примерно 15px
console.log('Ширина контента:', document.documentElement.clientWidth); // 1905px

Разница между метриками

// window.innerWidth / window.innerHeight
// - Размер видимой области браузера
// - ИСКЛЮЧАЕТ все панели браузера, адресную строку
// - ВКЛЮЧАЕТ вертикальный/горизонтальный скролбар

// document.documentElement.clientWidth / clientHeight
// - Размер видимой области внутри скролбара
// - НЕ ВКЛЮЧАЕТ скролбар
// - Это реальная ширина доступная для контента

// document.body.clientWidth
// - То же самое что documentElement.clientWidth
// - Зависит от DOCTYPE

window.addEventListener('resize', () => {
  console.log('innerWidth:', window.innerWidth);
  console.log('clientWidth:', document.documentElement.clientWidth);
  console.log('Разница (скролбар):', 
    window.innerWidth - document.documentElement.clientWidth
  );
});

Скролбар на разных ОС

Windows/Linux:

• Скролбар ширина: примерно 15-17px
• Положение: с правой стороны
• Всегда видимый (когда есть контент для скролла)

/* Стиль скролбара Windows */
body {
  scrollbar-width: 15px;
}

macOS:

• Скролбар ширина: переменная (7-15px)
• Появляется только при скролле
• Полупрозрачный

/* На macOS скролбар появляется только при скролле */
body {
  overflow-y: scroll;  /* Всегда показывать скролбар, даже на macOS */
}

Mobile (iOS, Android):

• Скролбар почти невидимый
• Занимает минимум места
• Не влияет на viewport

Практическое влияние на дизайн

Проблема:

Когда скролбар появляется/исчезает, контент смещается. Это особенно видно на macOS, где скролбар появляется только при наличии скролла.

// Пример проблемы: контент прыгает при появлении скролбара
const initialWidth = window.innerWidth; // 1920px

// Когда есть контент для скролла — скролбар появляется
const widthWithScrollbar = document.documentElement.clientWidth; // 1905px
// Контент смещается на 15px!

// Решение: всегда резервировать место для скролбара
body {
  scrollbar-gutter: stable;  /* Резервирует место для скролбара */
}

Правильный способ работать с viewport

// ✅ ПРАВИЛЬНО: используй clientWidth
const containerWidth = document.documentElement.clientWidth;
const containerHeight = document.documentElement.clientHeight;

// ❌ НЕПРАВИЛЬНО: используешь innerWidth (включает скролбар)
// const containerWidth = window.innerWidth;

// Для элемента внутри страницы
const element = document.querySelector('.container');
const elementWidth = element.clientWidth;   // Без скролбара
const elementHeight = element.clientHeight;  // Без скролбара

CSS решение для скролбара

/* Новый способ (Modern Browsers) */
body {
  scrollbar-gutter: stable;
}
/* Это резервирует место для скролбара, чтобы контент не прыгал */

/* Старый способ (всегда показывать скролбар) */
body {
  overflow-y: scroll;
}
/* Но это может выглядеть странно на macOS */

Полный пример проверки

function analyzeViewport() {
  const isScrollbarVisible = window.innerWidth !== 
                             document.documentElement.clientWidth;
  
  const scrollbarWidth = window.innerWidth - 
                         document.documentElement.clientWidth;
  
  const viewportInfo = {
    innerWidth: window.innerWidth,
    innerHeight: window.innerHeight,
    clientWidth: document.documentElement.clientWidth,
    clientHeight: document.documentElement.clientHeight,
    scrollbarWidth: scrollbarWidth,
    isScrollbarVisible: isScrollbarVisible,
    devicePixelRatio: window.devicePixelRatio
  };
  
  console.log('Viewport Info:', viewportInfo);
  
  if (isScrollbarVisible) {
    console.log(`Скролбар занимает ${scrollbarWidth}px`);
  } else {
    console.log('Видимого скролбара нет');
  }
}

analyzeViewport();
window.addEventListener('resize', analyzeViewport);

Измерение реального viewport

// Используй Intersection Observer для точного viewport
const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        console.log('Элемент видимый в viewport');
        console.log('Viewport координаты:', {
          top: entry.intersectionRect.top,
          left: entry.intersectionRect.left,
          width: entry.intersectionRect.width,
          height: entry.intersectionRect.height
        });
      }
    });
  }
);

observer.observe(document.querySelector('.element'));

На мобильных устройствах

// На мобильных скролбар практически не влияет
const isMobile = window.innerWidth < 768;

if (isMobile) {
  // На мобильных скролбар почти невидимый и не влияет на layout
  console.log('Скролбар не влияет на мобильном');
} else {
  // На десктопе нужно учитывать скролбар
  const scrollbarWidth = window.innerWidth - 
                         document.documentElement.clientWidth;
  console.log('Учитываем скролбар:', scrollbarWidth);
}

Ответ на вопрос

Входит ли вертикальный скролл в размер viewport?

1. window.innerWidth — НЕ входит скролбар в измерение, но скролбар физически занимает место
2. document.documentElement.clientWidth — это реальная ширина доступная контенту (БЕЗ скролбара)
3. Скролбар ширина примерно 15-17px на Windows/Linux
4. На macOS скролбар появляется только при скролле
5. Решение: используй scrollbar-gutter: stable в CSS, чтобы резервировать место

Дизайнеры должны учитывать, что на десктопе контент будет уже примерно на 15-17px из-за скролбара.