Как я могу получить размеры полосы прокрутки браузера?

Question

Как я могу получить размеры полосы прокрутки браузера?

Как определить высоту горизонтальной полосы прокрутки или ширину вертикальной полосы прокрутки в JavaScript?

191

javascript scrollbar

Источник

user118437 12 июн '09 в 14:30

26 ответов

Решение

Используя jQuery, вы можете сократить ответ Мэтью Вайнса на:

function getScrollBarWidth () {
    var $outer = $('<div>').css({visibility: 'hidden', width: 100, overflow: 'scroll'}).appendTo('body'),
        widthWithScroll = $('<div>').css({width: '100%'}).appendTo($outer).outerWidth();
    $outer.remove();
    return 100 - widthWithScroll;
};

85

Источник

user1104107 25 сен '13 в 21:10

Для меня самый полезный способ был

(window.innerWidth - document.getElementsByTagName('html')[0].clientWidth)

с ванильным JavaScript.

30

Источник

user3926641 12 апр '18 в 10:53

Если вы ищете простую операцию, просто смешайте обычный dom js и jquery,

var swidth=(window.innerWidth-$(window).width());

возвращает размер полосы прокрутки текущей страницы. (если он виден или еще вернет 0)

26

Источник

user2756352 01 апр '14 в 06:33

Это единственный найденный мной скрипт, который работает в браузерах webkit...:)

$.scrollbarWidth = function() {
  var parent, child, width;

  if(width===undefined) {
    parent = $('<div style="width:50px;height:50px;overflow:auto"><div/></div>').appendTo('body');
    child=parent.children();
    width=child.innerWidth()-child.height(99).innerWidth();
    parent.remove();
  }

 return width;
};

Свернутая версия:

$.scrollbarWidth=function(){var a,b,c;if(c===undefined){a=$('<div style="width:50px;height:50px;overflow:auto"><div/></div>').appendTo('body');b=a.children();c=b.innerWidth()-b.height(99).innerWidth();a.remove()}return c};

И вы должны позвонить, когда документ будет готов... так

$(function(){ console.log($.scrollbarWidth()); });

Протестировано 2012-03-28 на Windows 7 в последних версиях FF, Chrome, IE & Safari и работает на 100%.

источник: http://benalman.com/projects/jquery-misc-plugins/

25

Источник

user538371 28 мар '12 в 13:46

window.scrollBarWidth = function() {
  document.body.style.overflow = 'hidden'; 
  var width = document.body.clientWidth;
  document.body.style.overflow = 'scroll'; 
  width -= document.body.clientWidth; 
  if(!width) width = document.body.offsetWidth - document.body.clientWidth;
  document.body.style.overflow = ''; 
  return width; 
}

18

Источник

user54420 12 июн '09 в 19:59

Я нашел простое решение, которое работает для элементов внутри страницы, а не самой страницы:$('#element')[0].offsetHeight - $('#element')[0].clientHeight

Это возвращает высоту полосы прокрутки оси X.

9

Источник

user1017953 23 июл '14 в 15:24

Из блога Дэвида Уолша:

// Create the measurement node
var scrollDiv = document.createElement("div");
scrollDiv.className = "scrollbar-measure";
document.body.appendChild(scrollDiv);

// Get the scrollbar width
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
console.info(scrollbarWidth); // Mac:  15

// Delete the DIV 
document.body.removeChild(scrollDiv);

.scrollbar-measure {
 width: 100px;
 height: 100px;
 overflow: scroll;
 position: absolute;
 top: -9999px;
}

Дает мне 17 на моем сайте, 14 здесь, на Stackru.

8

Источник

user65387 13 июн '16 в 02:00

Это должно сработать, нет?

function getScrollbarWidth() {
  return (window.innerWidth - document.documentElement.clientWidth);
}

6

Источник

user1946074 04 фев '19 в 08:24

Вы можете определить window полоса прокрутки с document как показано ниже с использованием jquery + javascript:

var scrollbarWidth = ($(document).width() - window.innerWidth);
console.info("Window Scroll Bar Width=" + scrollbarWidth );

5

Источник

user2741462 10 июн '16 в 09:12

function getScrollBarWidth() {
    return window.innerWidth - document.documentElement.clientWidth;
}

В большинстве браузеров ширина полосы прокрутки составляет 15 пикселей.

4

Источник

user7499978 25 фев '20 в 09:42

Создать пустой div и убедитесь, что он присутствует на всех страницах (т.е. поместив его в header шаблон).

Дайте ему этот стиль:

#scrollbar-helper {
    // Hide it beyond the borders of the browser
    position: absolute;
    top: -100%;

    // Make sure the scrollbar is always visible
    overflow: scroll;
}

Затем просто проверьте размер #scrollbar-helper с помощью Javascript:

var scrollbarWidth = document.getElementById('scrollbar-helper').offsetWidth;
var scrollbarHeight = document.getElementById('scrollbar-helper').offsetHeight;

Не нужно ничего вычислять, так как этот div всегда будет иметь width а также height из scrollbar,

Единственным недостатком является то, что будет пустой div в ваших шаблонах... Но, с другой стороны, ваши файлы Javascript будут чище, так как это займет всего 1 или 2 строки кода.

4

Источник

user9507163 17 мар '18 в 11:44

Если у вас уже есть элемент с полосами прокрутки, используйте:

function getScrollbarHeight(el) {
    return el.getBoundingClientRect().height - el.scrollHeight;
};

Если панель horzintscroll не присутствует, функция перезапустится 0

4

Источник

user1393681 05 окт '15 в 11:33

Путь Antiscroll.js делает это в своем коде:

function scrollbarSize () {
  var div = $(
      '<div class="antiscroll-inner" style="width:50px;height:50px;overflow-y:scroll;'
    + 'position:absolute;top:-200px;left:-200px;"><div style="height:100px;width:100%"/>'
    + '</div>'
  );

  $('body').append(div);
  var w1 = $(div).innerWidth();
  var w2 = $('div', div).innerWidth();
  $(div).remove();

  return w1 - w2;
};

Код отсюда: https://github.com/LearnBoost/antiscroll/blob/master/antiscroll.js#L447

3

Источник

user914986 28 мар '14 в 08:08

detectScrollbarWidthHeight: function() {
    var div = document.createElement("div");
    div.style.overflow = "scroll";
    div.style.visibility = "hidden";
    div.style.position = 'absolute';
    div.style.width = '100px';
    div.style.height = '100px';
    document.body.appendChild(div);

    return {
        width: div.offsetWidth - div.clientWidth,
        height: div.offsetHeight - div.clientHeight
    };
},

Протестировано в Chrome, FF, IE8, IE11.

3

Источник

user385273 10 апр '14 в 16:40

Я нашел это решение в material-ui код, и он работает для меня.

      const scrollbarWidth = window.innerWidth -  document.querySelector('body').clientWidth;

2

Источник

user7790793 05 июл '21 в 18:41

Самый простой способ, который я мог придумать, это:

      const scrollWidth = element.offsetWidth - element.clientWidth;

Если полосы прокрутки нет, она вернет 0.

2

Источник

user10042451 19 окт '23 в 12:51

function getWindowScrollBarHeight() {
    let bodyStyle = window.getComputedStyle(document.body);
    let fullHeight = document.body.scrollHeight;
    let contentsHeight = document.body.getBoundingClientRect().height;
    let marginTop = parseInt(bodyStyle.getPropertyValue('margin-top'), 10);
    let marginBottom = parseInt(bodyStyle.getPropertyValue('margin-bottom'), 10);
    return fullHeight - contentHeight - marginTop - marginBottom;
  }

1

Источник

user454252 26 сен '16 в 22:48

Это решение позволит вам найти ширину прокрутки браузера (ванильный JavaScript). Используя этот пример, вы можете получить scrollY width для любого элемента, включая те элементы, которые не должны иметь прокрутку в соответствии с вашей текущей концепцией дизайна:

getComputedScrollYWidth     (el)  {

  let displayCSSValue  ; // CSS value
  let overflowYCSSValue; // CSS value

  // SAVE current original STYLES values
  {
    displayCSSValue   = el.style.display;
    overflowYCSSValue = el.style.overflowY;
  }

  // SET TEMPORALLY styles values
  {
    el.style.display   = 'block';
    el.style.overflowY = 'scroll';
  }

  // SAVE SCROLL WIDTH of the current browser.
  const scrollWidth = el.offsetWidth - el.clientWidth;

  // REPLACE temporally STYLES values by original
  {
    el.style.display   = displayCSSValue;
    el.style.overflowY = overflowYCSSValue;
  }

  return scrollWidth;
}

0

Источник

user5235380 11 июл '17 в 10:00

Уже закодирован в моей библиотеке, так что вот он:

var vScrollWidth = window.screen.width - window.document.documentElement.clientWidth;

Я должен упомянуть, что jQuery $(window).width() также может использоваться вместо window.document.documentElement.clientWidth.

Это не сработает, если вы откроете инструменты разработчика в firefox справа, но он преодолеет это, если окно разработчика открыто внизу!

window.screenподдерживается quirksmode.org!

Радоваться, веселиться!

0

Источник

user1609791 26 ноя '19 в 13:33

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

Свойство возвращает общую ширину содержимого, отступов, границы и полосы прокрутки (если есть). Принимая во внимание, что свойство возвращает только общую ширину содержимого и отступов.

Итак, если мы вычтем clientWidth и горизонтальная граница из offsetWidth, у нас останется ширина полосы прокрутки. То есть, если есть полоса прокрутки, мы получим ширину полосы прокрутки. Но если полосы прокрутки нет, мы получим 0.

      const element = document.querySelector("div");
const elementStyle = window.getComputedStyle(element);
const horizontalBorder = parseFloat(elementStyle.borderLeftWidth) + parseFloat(elementStyle.borderRightWidth);
const scrollbarWidth = element.offsetWidth - element.clientWidth - horizontalBorder + "px";

0

Источник

user15757382 11 июл '21 в 10:16

Вроде работает, но, может быть, есть более простое решение, работающее во всех браузерах?

// Create the measurement node
var scrollDiv = document.createElement("div");
scrollDiv.className = "scrollbar-measure";
document.body.appendChild(scrollDiv);

// Get the scrollbar width
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
console.info(scrollbarWidth); // Mac:  15

// Delete the DIV 
document.body.removeChild(scrollDiv);

.scrollbar-measure {
 width: 100px;
 height: 100px;
 overflow: scroll;
 position: absolute;
 top: -9999px;
}

0

Источник

user5737720 02 июн '20 в 22:43

Это отличный ответ: /questions/6792677/kak-ya-mogu-poluchit-razmeryi-polosyi-prokrutki-brauzera/6792688#6792688

Однако в моем случае это не сработало. И я часами искал решение.
Наконец, я вернулся к приведенному выше коду и добавил! Важно для каждого стиля. И это сработало.
Я не могу добавить комментарии ниже исходного ответа. Итак, вот исправление:

function getScrollBarWidth () {
  var inner = document.createElement('p');
  inner.style.width = "100% !important";
  inner.style.height = "200px !important";

  var outer = document.createElement('div');
  outer.style.position = "absolute !important";
  outer.style.top = "0px !important";
  outer.style.left = "0px !important";
  outer.style.visibility = "hidden !important";
  outer.style.width = "200px !important";
  outer.style.height = "150px !important";
  outer.style.overflow = "hidden !important";
  outer.appendChild (inner);

  document.body.appendChild (outer);
  var w1 = inner.offsetWidth;
  outer.style.overflow = 'scroll !important';
  var w2 = inner.offsetWidth;
  if (w1 == w2) w2 = outer.clientWidth;

  document.body.removeChild (outer);

  return (w1 - w2);
};

0

Источник

user5914609 23 апр '16 в 11:10

Вот более краткое и простое для чтения решение, основанное на разнице ширины смещения:

function getScrollbarWidth(): number {

  // Creating invisible container
  const outer = document.createElement('div');
  outer.style.visibility = 'hidden';
  outer.style.overflow = 'scroll'; // forcing scrollbar to appear
  outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps
  document.body.appendChild(outer);

  // Creating inner element and placing it in the container
  const inner = document.createElement('div');
  outer.appendChild(inner);

  // Calculating difference between container's full width and the child width
  const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);

  // Removing temporary elements from the DOM
  outer.parentNode.removeChild(outer);

  return scrollbarWidth;

}

Смотрите JSFiddle.

0

Источник

user1056679 29 май '19 в 11:35

Я сделал обновленную версию ответа @Matthew Vines.

Легче читать, легче понимать. Не требует внутреннего элемента. Элемент, созданный для получения ширины полосы прокрутки, имеет высоту / ширину 100%, поэтому он не создает видимой полосы прокрутки на теле на нижних ПК / мобильных устройствах, что может занять немного больше времени для создания элемента, получить ширину, и, наконец, удалите элемент.

const getScrollBarWidth = () => {
  const e = document.createElement('div');
  Object.assign(e.style, {
    width: '100%',
    height: '100%',
    overflow: 'scroll',
    position: 'absolute',
    visibility: 'hidden',
    top: '0',
    left: '0',
  });

  document.body.appendChild(e);

  const scrollbarWidth = e.offsetWidth - e.clientWidth;

  document.body.removeChild(e);

  return scrollbarWidth;
};

console.log(getScrollBarWidth());

Я рекомендую проверять ширину полосы прокрутки только один раз, при загрузке страницы (кроме случаев, когда она не соответствует вашим потребностям), а затем сохранять результат в состоянии / переменной.

0

Источник

user8990411 04 авг '20 в 10:56

С помощью jquery (проверено только в Firefox):

function getScrollBarHeight() {
    var jTest = $('<div style="display:none;width:50px;overflow: scroll"><div style="width:100px;"><br /><br /></div></div>');
    $('body').append(jTest);
    var h = jTest.innerHeight();
    jTest.css({
        overflow: 'auto',
        width: '200px'
    });
    var h2 = jTest.innerHeight();
    return h - h2;
}

function getScrollBarWidth() {
    var jTest = $('<div style="display:none;height:50px;overflow: scroll"><div style="height:100px;"></div></div>');
    $('body').append(jTest);
    var w = jTest.innerWidth();
    jTest.css({
        overflow: 'auto',
        height: '200px'
    });
    var w2 = jTest.innerWidth();
    return w - w2;
}

Но мне больше нравится ответ @ Стива.

0

Источник

user405042 23 сен '14 в 11:14

Другие вопросы по тегам javascript scrollbar

user100930 12 июн '09 в 14:37 2009-06-12 14:37 · Accepted Answer · 2009-06-12 14:37

Из блога Александра Гомеса я не пробовал. Дайте мне знать, если это работает для вас.

function getScrollBarWidth () {
  var inner = document.createElement('p');
  inner.style.width = "100%";
  inner.style.height = "200px";

  var outer = document.createElement('div');
  outer.style.position = "absolute";
  outer.style.top = "0px";
  outer.style.left = "0px";
  outer.style.visibility = "hidden";
  outer.style.width = "200px";
  outer.style.height = "150px";
  outer.style.overflow = "hidden";
  outer.appendChild (inner);

  document.body.appendChild (outer);
  var w1 = inner.offsetWidth;
  outer.style.overflow = 'scroll';
  var w2 = inner.offsetWidth;
  if (w1 == w2) w2 = outer.clientWidth;

  document.body.removeChild (outer);

  return (w1 - w2);
};