브라우저의 스크롤 바 크기를 얻으려면 어떻게 해야 합니까?

브라우저의 스크롤 바 크기를 얻으려면 어떻게 해야 합니까?

자바스크립트에서 가로 스크롤 바의 높이 또는 세로 스크롤 바의 너비를 결정하려면 어떻게 해야 합니까?

Alexandre Gomes 블로그에서 나는 그것을 시도하지 않았습니다.그것이 당신에게 도움이 된다면 저에게 알려주세요.

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

나에게 가장 유용한 방법은

(window.innerWidth - document.documentElement.clientWidth)

바닐라 자바스크립트를 사용할 수 있습니다.

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

$.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 및 100% 작동하는 Windows 7에서 2012-03-28을 테스트했습니다.

출처 : http://benalman.com/projects/jquery-misc-plugins/ # scroll 막대폭

간단한 수술을 찾는다면, 그냥 플레인 돔 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; 
} 

솔루션을 바로 입니다.$('#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개를 줘요.

당신은 결정할 수 있습니다.window 스크롤 바document아래와 같이 jquery + javascript를 사용합니다.

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

이게 효과가 있을거야, 안그래요?

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

스크롤 막대가 있는 요소가 이미 있는 경우 다음을 사용합니다.

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

호진트 스크롤 바가 없으면 이 기능은 0으로 되돌아갑니다.

길은.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에서 테스트했습니다.

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자바스크립트 사용:

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

이 처럼, .divwidth그리고.heightscrollbar.

빈 입니다가 입니다.div당신의 템플릿에..그러나 반면에 당신의 자바스크립트 파일은 1줄이나 2줄의 코드만 사용하면 되기 때문에 더 깨끗해질 것입니다.

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

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

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

는 그 에서 찾았습니다.material-ui코드가 잘 맞아요

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

jquery(jquery) 사용(firex에서만 테스트됨):

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://stackoverflow.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);
};

이 라이프핵 결정을 통해 브라우저 스크롤 Y 너비(vanilla JavaScript)를 찾을 수 있습니다.이 예제를 사용하면 현재 설계 개념에 따라 스크롤할 필요가 없는 요소를 포함하여 모든 요소에서 스크롤 Y 너비를 얻을 수 있습니다.

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;

는 jQuery 를요 jQuery .$(window).width()다 대신 .window.document.documentElement.clientWidth.

오른쪽 파이어폭스에서 개발자 도구를 열면 작동하지 않지만 하단에 devs 창을 열면 극복됩니다!

window.screen지원됩니다. quirksmode.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;
}

@Matthew Vines 답변을 업데이트 했습니다.

읽기도 쉽고 이해하기도 쉽죠.그것은 내부 요소를 필요로 하지 않습니다.스크롤 바 폭을 얻기 위해 만든 요소는 높이/폭이 100%이므로 하단 PC/모바일에서 본체에 보이는 스크롤 바를 만들지 않으므로 요소를 만들고 폭을 구한 후 요소를 제거하는 데 시간이 조금 더 걸릴 수 있습니다.

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

페이지 로드 시(필요에 맞지 않는 경우를 제외하고) 스크롤 바 너비를 한 번만 확인한 후 결과를 상태/변수에 저장하는 것을 권장합니다.

이 솔루션을 사용하면 웹 페이지 자체가 아닌 웹 페이지 내부 요소의 스크롤 막대 너비를 찾을 수 있습니다.가로 스크롤 바의 경우 너비 관련 속성을 높이 관련 속성으로 대체하여 스크롤 바 높이에 맞게 다시 작성할 수도 있습니다.

offsetWidthproperty는 내용의 전체 너비, 패딩, 테두리 및 스크롤 막대(있는 경우)를 반환합니다.에.clientWidth합니다.합니다.

그래서 만약에 우리가 빼서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";

언급URL : https://stackoverflow.com/questions/986937/how-can-i-get-the-browsers-scrollbar-sizes