브라우저의 스크롤바 크기를 어떻게 알 수 있습니까?

JavaScript에서 가로 스크롤 막대의 높이 또는 세로 스크롤 막대의 너비를 어떻게 확인할 수 있습니까?

에서 알렉상드르 고메즈 블로그 나는 그것을 시도하지 않았습니다. 그것이 당신을 위해 작동하는지 알려주세요.

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

jQuery를 사용하면 Matthew Vines의 답변을 다음과 같이 단축 할 수 있습니다.

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

이것은 내가 찾은 스크립트이며, 웹킷 브라우저에서 작동합니다 ... :)

$.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()); });

최신 FF, Chrome, IE 및 Safari 및 Windows 100에서 100 % 작동하는 Windows 7에서 2012-03-28에서 테스트되었습니다.

출처 : http://benalman.com/projects/jquery-misc-plugins/#scrollbarwidth

간단한 작업을 찾고 있다면 일반 dom js와 jquery를 혼합하십시오.

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

현재 페이지 스크롤 막대의 크기를 반환합니다. (보이거나 그렇지 않으면 0을 반환합니다)

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

나에게 가장 유용한 방법은

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

바닐라 JavaScript로.

페이지 자체 대신 페이지 내부의 요소에 작동하는 간단한 솔루션을 찾았습니다. $('#element')[0].offsetHeight - $('#element')[0].clientHeight

x 축 스크롤 막대의 높이를 반환합니다.

에서 데이비드 월시의 블로그 :

// 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 개를 제공합니다.

이미 스크롤 막대가있는 요소가있는 경우 다음을 사용하십시오.

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

horzintscrollbar가 없으면 함수는 0을 다시 조정합니다.

jquery + javascript를 사용하여 아래와 같이 window스크롤 막대를 결정할 수 있습니다 document.

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

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

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에서 테스트되었습니다.

이 트릭을해야합니까?

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

빈 페이지 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-helperJavascript로 크기를 확인하십시오 .

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

div항상 width및 height의를 가지므로 계산할 필요가 없습니다 scrollbar.

유일한 단점은 div템플릿에 빈 파일 이 있다는 것입니다 . 그러나 Javascript 파일은 한 줄 또는 두 줄의 코드 만 필요하므로 더 깨끗합니다.

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

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

대부분의 브라우저는 스크롤 막대 너비로 15px를 사용합니다.

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

그러나 실제로 @Steve의 답변이 더 좋습니다.

이것은 좋은 대답입니다 : https : //.com/a/986977/5914609

그러나 제 경우에는 효과가 없었습니다. 그리고 솔루션을 검색하는 데 몇 시간을 보냈습니다.
마지막으로 위의 코드로 돌아가서 각 스타일에 중요를 추가했습니다. 그리고 효과가있었습니다.
원래 답변 아래에 의견을 추가 할 수 없습니다. 수정 사항은 다음과 같습니다.

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

이 구명 결정은 브라우저 scrollY 너비 (바닐라 JavaScript) 를 찾을 수있는 기회를 제공합니다 . 이 예제를 사용하면 현재 디자인 개념에 따라 스크롤 할 필요가없는 요소를 포함하여 모든 요소에서 scrollY 너비 를 얻을 수 있습니다.

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

오프셋 너비 차이를 기반으로보다 간결하고 읽기 쉬운 솔루션은 다음과 같습니다.

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을 참조하십시오 .

내 라이브러리에 이미 코딩되어 있으므로 다음과 같습니다.

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

$(window).width()대신 jQuery를 사용할 수도 있습니다 window.document.documentElement.clientWidth.

오른쪽에 firefox에서 개발자 도구를 열면 작동하지 않지만 devs 창이 열리면 극복합니다!

window.screenquirksmode.org 지원 됩니다 !

즐기세요!

작동하는 것 같지만 모든 브라우저에서 작동하는 더 간단한 솔루션이 있습니까?

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