Làm cách nào tôi có thể nhận được kích thước thanh cuộn của trình duyệt?

Làm cách nào để xác định chiều cao của thanh cuộn ngang hoặc chiều rộng của thanh dọc, trong JavaScript?

Từ Blog của Alexandre Gomes tôi chưa thử. Hãy cho tôi biết nếu nó làm việc cho bạn.

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

Sử dụng jQuery, bạn có thể rút ngắn câu trả lời của 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;
};

Đây chỉ là tập lệnh tôi tìm thấy, đang hoạt động trong trình duyệt 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;
};

Phiên bản thu nhỏ:

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

Và bạn phải gọi nó khi tài liệu đã sẵn sàng ... vì vậy

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

Đã thử nghiệm 2012 / 03-28 trên Windows 7 trong FF, Chrome, IE & Safari mới nhất và hoạt động 100%.

nguồn: http://benalman.com/projects/jquery-misc-plugins/#scrollbarference

Nếu bạn đang tìm kiếm một hoạt động đơn giản, chỉ cần trộn js dom và jquery đơn giản,

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

trả về kích thước của thanh cuộn trang hiện tại. (nếu nó hiển thị nếu không sẽ trả về 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; 
} 

Đối với tôi, cách hữu ích nhất là

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

với JavaScript vani.

Tôi tìm thấy một giải pháp đơn giản hoạt động cho các thành phần bên trong trang, thay vì chính trang đó: $('#element')[0].offsetHeight - $('#element')[0].clientHeight

Điều này trả về chiều cao của thanh cuộn trục x.

Từ blog của David Walsh :

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

Cung cấp cho tôi 17 trên trang web của tôi, 14 ở đây trên Stackoverflow.

Nếu bạn đã có một phần tử có thanh cuộn trên đó, hãy sử dụng:

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

Nếu không có horzintscrollbar, chức năng sẽ trả về 0

Bạn có thể xác định windowthanh cuộn với documentbên dưới bằng jquery + javascript:

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

Cách thức Antiscroll.jsthực hiện trong mã của nó là:

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

Mã từ đây: 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
    };
},

Đã thử nghiệm trong Chrome, FF, IE8, IE11.

Điều này có nên làm mánh khóe không?

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

Tạo một sản phẩm nào divvà đảm bảo nó có mặt trên tất cả các trang (nghĩa là bằng cách đặt nó vàoheader mẫu).

Cung cấp cho nó kiểu dáng này:

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

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

Sau đó, chỉ cần kiểm tra kích thước của #scrollbar-helperJavascript:

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

Không cần phải tính toán bất cứ điều gì, vì điều này divsẽ luôn luôn có widthvà heightcủa scrollbar.

Nhược điểm duy nhất là sẽ có một khoảng trống divtrong các mẫu của bạn .. Nhưng mặt khác, các tệp Javascript của bạn sẽ sạch hơn, vì điều này chỉ mất 1 hoặc 2 dòng mã.

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

Hầu hết các trình duyệt sử dụng 15px cho chiều rộng thanh cuộn

Với jquery (chỉ được thử nghiệm trong 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;
}

Nhưng tôi thực sự thích câu trả lời của @ Steve hơn.

Đây là một câu trả lời tuyệt vời: https://stackoverflow.com/a/986977/5914609

Tuy nhiên trong trường hợp của tôi nó không hoạt động. Và tôi đã dành hàng giờ để tìm kiếm giải pháp.
Cuối cùng tôi đã trở lại mã trên và thêm! Quan trọng cho từng phong cách. Va no đa hoạt động.
Tôi không thể thêm ý kiến ​​dưới câu trả lời ban đầu. Vì vậy, đây là sửa chữa:

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

Quyết định hack trọn đời này sẽ cho bạn cơ hội tìm thấy chiều rộng cuộn của trình duyệt (vanilla JavaScript). Sử dụng ví dụ này, bạn có thể lấy chiều rộng cuộn trên bất kỳ phần tử nào, kể cả những phần tử không cần phải có cuộn theo quan niệm thiết kế hiện tại của bạn ,:

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

Đây là giải pháp ngắn gọn và dễ đọc hơn dựa trên chênh lệch độ rộng bù:

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;

}

Xem JSFiddle .

Đã được mã hóa trong thư viện của tôi vì vậy đây là:

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

Tôi nên đề cập rằng jQuery $(window).width()cũng có thể được sử dụng thay thế window.document.documentElement.clientWidth.

Nó không hoạt động nếu bạn mở các công cụ dành cho nhà phát triển trong firefox ở bên phải nhưng nó sẽ khắc phục được nếu cửa sổ dev được mở ở phía dưới!

window.screenđược hỗ trợ quirksmode.org !

Chúc vui vẻ!

Nó dường như hoạt động, nhưng có lẽ có một giải pháp đơn giản hơn hoạt động trong tất cả các trình duyệt?

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