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

Question

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

Answer 1

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

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);
};

Answer 2

Используя 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;
};

Answer 3

Это единственный найденный мной скрипт, который работает в браузерах 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/#scrollbarwidth

Answer 4

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

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

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

Answer 5

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; 
} 

Answer 6

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

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

Answer 7

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

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

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

Answer 8

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

// 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 здесь, на Stackoverflow.

Answer 9

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

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

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

Answer 10

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

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