Управление HTML DOM с ванильным JavaScript

Авторизоваться

1. Вычесть `clientWidth` из `offsetWidth`

Свойство clientWidth указывает ширину без прокрутки. С другой стороны offsetWidth, включает в себя полосу прокрутки, если есть.

Вот простой расчет для определения ширины полосы прокрутки:

const scrollbarWidth = document.body.offsetWidth - document.body.clientWidth;

2. Используйте поддельный элемент

Мы создаем два поддельных div элемента, один из которых является потомком другого. Затем рассчитайте разницу между их ширинами.

const calculateScrollbarWidth = function() {
    // Create the parent element
    const outer = document.createElement('div');
    outer.style.visibility = 'hidden';
    outer.style.overflow = 'scroll';

    // Append it to `body`
    document.body.appendChild(outer);

    // Create the child element
    const inner = document.createElement('div');
    outer.appendChild(inner);

    // Calculate the difference between their widths
    const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;

    // Remove the parent element
    document.body.removeChild(outer);

    return scrollbarWidth;
};

Этот метод не работает в macOS, если для параметра Показать полосы прокрутки установлено значение Автоматически на основе мыши или трекпада или При прокрутке.

Чтобы оставить комментарий, необходимо авторизоваться

Войти на сайт

Как управлять DOM на чистом JavaScript?

1. Вычесть clientWidth из offsetWidth

2. Используйте поддельный элемент

1. Вычесть `clientWidth` из `offsetWidth`