JavaScript를 사용하여 스크롤 막대 너비 가져오기

JavaScript를 사용하여 스크롤 막대 너비 가져오기

이 질문에는 이미 다음과 같은 답변이 있습니다.

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

닫힘6년 전에.

다음 HTML은 div.container의 오른쪽 안쪽 가장자리에 스크롤 바를 표시합니다.

저 스크롤 바의 폭을 결정하는 것이 가능합니까?

<div class="container" style="overflow-y:auto; height:40px;">
  <div class="somethingBig"></div>
</div>

이 함수는 스크롤 바의 너비를 제공해야 합니다.

function getScrollbarWidth() {

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

}

기본 단계는 다음과 같습니다.

1. 숨김 디브(outer)를 만들어 오프셋 폭을 가져옵니다.
2. CSS 오버플로 속성을 사용하여 스크롤 막대를 div(outer)로 강제 표시
3. 새 디브(내부)를 생성하고 외부에 추가한 후 너비를 '100%'로 설정하고 오프셋 너비를 가져옵니다.
4. 수집된 오프셋을 기준으로 스크롤 막대 폭 계산

여기서 작동 예: http://jsfiddle.net/slavafomin/tsrmgcu9/

갱신하다

Windows(메트로) 앱에서 이 기능을 사용하는 경우 'outer' div의 -ms-overflow 스타일 속성을 다음으로 설정해야 합니다.scrollbar, 그렇지 않으면 폭이 올바르게 감지되지 않습니다.(코드 업데이트됨)

업데이트 #2 기본 "스크롤 시 스크롤 바만 표시" 설정(요세미티 이상)이 있는 Mac OS에서는 작동하지 않습니다.

offsetWidth스크롤 바의 너비를 포함합니다.clientWidthDoesn't.일반적으로 14-18px와 같습니다.그래서:

let scrollBarWidth = element.offsetWidth - element.clientWidth;

요소에 현재 스크롤 바가 없는 경우 0이 반환되므로 스크롤 바가 있는 임시 요소를 만들어 브라우저의 스크롤 바 폭을 계산하는 간단한 기능이 있습니다.

function getScrollBarWidth() {
  let el = document.createElement("div");
  el.style.cssText = "overflow:scroll; visibility:hidden; position:absolute;";
  document.body.appendChild(el);
  let width = el.offsetWidth - el.clientWidth;
  el.remove();
  return width;
}

이것은 간단하고 빠를 것이라고 생각합니다.

var scrollWidth= window.innerWidth-$(document).width()

자식이 스크롤 막대를 제외한 컨테이너의 전체 너비(기본값)를 사용하는 경우 너비를 뺄 수 있습니다.

var child = document.querySelector(".somethingBig");
var scrollbarWidth = child.parentNode.offsetWidth - child.offsetWidth;

jquery.ui를 사용하는 경우 다음 코드를 사용해 보십시오.

$.position.scrollbarWidth()

다음 기능을 사용하여 스크롤 바 높이/폭을 구했습니다.

function getBrowserScrollSize(){

    var css = {
        "border":  "none",
        "height":  "200px",
        "margin":  "0",
        "padding": "0",
        "width":   "200px"
    };

    var inner = $("<div>").css($.extend({}, css));
    var outer = $("<div>").css($.extend({
        "left":       "-1000px",
        "overflow":   "scroll",
        "position":   "absolute",
        "top":        "-1000px"
    }, css)).append(inner).appendTo("body")
    .scrollLeft(1000)
    .scrollTop(1000);

    var scrollSize = {
        "height": (outer.offset().top - inner.offset().top) || 0,
        "width": (outer.offset().left - inner.offset().left) || 0
    };

    outer.remove();
    return scrollSize;
}

이 jQuery 기반 솔루션은 IE7+ 및 기타 모든 최신 브라우저(스크롤바 높이/폭이 0인 모바일 장치 포함)에서 작동합니다.

jQuery를 쉽게 사용할 수 있는 방법이 있습니다.

var scrollbarWidth = jQuery('div.withScrollBar').get(0).scrollWidth - jQuery('div.withScrollBar').width();

기본적으로 전체 너비에서 스크롤 가능한 너비를 빼면 스크롤 바의 너비를 제공할 수 있습니다.물론 jQuery('div.withScrollBar') 선택 항목을 캐시하여 해당 부분을 두 번 수행하지 않도록 해야 합니다.

컨테이너가 페이지에 한 번만 있고 jQuery를 사용하고 있다고 가정하면 다음과 같습니다.

var containerEl = $('.container')[0];
var scrollbarWidth = containerEl.offsetWidth - containerEl.clientWidth;

자세한 내용은 이 답변을 참조하십시오.

이것은 나에게 효과가 있었습니다.

 function getScrollbarWidth() { 
    var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div>'); 
    $('body').append(div); 
    var w1 = $('div', div).innerWidth(); 
    div.css('overflow-y', 'scroll'); 
    var w2 = $('div', div).innerWidth(); 
    $(div).remove(); 
    return (w1 - w2); 
}

언급URL : https://stackoverflow.com/questions/13382516/getting-scroll-bar-width-using-javascript