Bagaimana saya bisa mendapatkan ukuran scrollbar browser?

Bagaimana saya bisa menentukan ketinggian scrollbar horizontal, atau lebar yang vertikal, di JavaScript?

Dari Alexandre Gomes Blog saya belum mencobanya. Beri tahu saya jika itu berhasil untuk Anda.

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

Menggunakan jQuery, Anda dapat mempersingkat jawaban Matthew Vines ke:

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

Ini hanya skrip yang saya temukan, yang berfungsi di browser 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;
};

Versi yang diperkecil:

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

Dan Anda harus menyebutnya ketika dokumen siap ... jadi

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

Diuji 2012-03-28 pada Windows 7 dalam FF, Chrome, IE & Safari terbaru dan 100% berfungsi.

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

jika Anda mencari operasi sederhana, cukup campur dom js dan jquery,

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

mengembalikan ukuran bilah gulir halaman saat ini. (jika terlihat atau yang lain akan mengembalikan 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; 
} 

Bagi saya, cara yang paling bermanfaat adalah

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

dengan JavaScript vanilla.

Saya menemukan solusi sederhana yang berfungsi untuk elemen di dalam halaman, bukan halaman itu sendiri: $('#element')[0].offsetHeight - $('#element')[0].clientHeight

Ini mengembalikan ketinggian scrollbar sumbu x.

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

Memberi saya 17 di situs web saya, 14 di sini di Stackoverflow.

Jika Anda sudah memiliki elemen dengan scrollbar, gunakan:

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

Jika tidak ada horzintscrollbar, fungsi ini akan mengembalikan 0

Anda dapat menentukan windowscroll bar dengan documentseperti di bawah ini menggunakan jquery + javascript:

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

Cara Antiscroll.jsmelakukannya dalam kode itu adalah:

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

Kode berasal dari sini: 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
    };
},

Diuji di Chrome, FF, IE8, IE11.

Ini seharusnya melakukan trik, bukan?

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

Buat yang kosong divdan pastikan itu ada di semua halaman (yaitu dengan meletakkannya di headertemplat).

Berikan gaya ini:

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

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

Kemudian cukup periksa ukurannya #scrollbar-helperdengan Javascript:

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

Tidak perlu menghitung apa pun, karena ini divakan selalu memiliki widthdan heightdari scrollbar.

Satu-satunya downside adalah bahwa akan ada kosong divdi template Anda .. Tetapi di sisi lain, file Javascript Anda akan lebih bersih, karena ini hanya membutuhkan 1 atau 2 baris kode.

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

Sebagian besar browser menggunakan 15px untuk lebar scrollbar

Dengan jquery (hanya diuji di 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;
}

Tapi saya sebenarnya lebih suka jawaban Steve.

Ini adalah jawaban yang bagus: https://stackoverflow.com/a/986977/5914609

Namun dalam kasus saya itu tidak berhasil. Dan saya menghabiskan berjam-jam mencari solusinya.
Akhirnya saya telah kembali ke kode di atas dan menambahkan! Penting untuk setiap gaya. Dan itu berhasil.
Saya tidak bisa menambahkan komentar di bawah jawaban asli. Jadi di sini adalah perbaikannya:

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

Keputusan seumur hidup ini akan memberi Anda kesempatan untuk menemukan lebar peramban scrollY (JavaScript vanilla). Dengan menggunakan contoh ini Anda bisa mendapatkan lebar gulir pada elemen apa pun termasuk elemen -elemen yang tidak harus memiliki gulir sesuai dengan konsepsi desain Anda saat ini ,:

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

Inilah solusi yang lebih ringkas dan mudah dibaca berdasarkan perbedaan lebar offset:

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;

}

Lihat JSFiddle .

Sudah dikodekan di perpustakaan saya jadi ini dia:

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

Saya harus menyebutkan bahwa jQuery $(window).width()juga bisa digunakan window.document.documentElement.clientWidth.

Tidak berfungsi jika Anda membuka alat pengembang di firefox di sebelah kanan tetapi mengatasinya jika jendela devs dibuka di bagian bawah!

window.screendidukung quirksmode.org !

Selamat bersenang-senang!

Tampaknya berfungsi, tetapi mungkin ada solusi sederhana yang berfungsi di semua browser?

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