Tarayıcının kaydırma çubuğu boyutlarını nasıl alabilirim?

JavaScript'te yatay kaydırma çubuğunun yüksekliğini veya dikey çubuğun genişliğini nasıl belirleyebilirim?

Gönderen Alexandre Gomes Blog bunu denemedim. Sizin için işe yarayıp yaramadığını bana bildirin.

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 kullanarak Matthew Vines'in yanıtını kısaltabilirsiniz:

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

Bu sadece bulduğum script, webkit tarayıcılarında çalışıyor ... :)

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

Minimize edilmiş sürüm:

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

Ve belge hazır olduğunda çağırmalısınız ...

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

En son FF, Chrome, IE ve Safari'de Windows 7'de 2012-03-28 test edildi ve% 100 çalışıyor.

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

basit bir işlem arıyorsanız, sadece düz dom js ve jquery karıştırın,

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

geçerli sayfa kaydırma çubuğunun boyutunu döndürür. (görünürse veya 0 döndürürse)

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

Benim için en yararlı yol

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

vanilya JavaScript ile.

Sayfanın kendisi yerine sayfanın içindeki öğeler için çalışan basit bir çözüm buldum: $('#element')[0].offsetHeight - $('#element')[0].clientHeight

Bu, x ekseni kaydırma çubuğunun yüksekliğini döndürür.

Gönderen David Walsh'ın blogunda :

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

Bana web sitemde 17, Stackoverflow'da 14 tane veriyor.

Üzerinde kaydırma çubukları bulunan bir öğeniz zaten varsa:

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

Horzintscrollbar mevcut değilse işlev 0'ı yeniden başlatır

Jquery + javascript kullanarak windowkaydırma çubuğunu documentaşağıdaki gibi belirleyebilirsiniz :

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

Onun Antiscroll.jskodunda böyle yapar:

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

Kod buradan: 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'de test edildi.

Bu hile yapmalı, değil mi?

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

Boş bir sayfa oluşturun divve tüm sayfalarda bulunduğundan emin olun (ör.header şablona ).

Bu tarzı verin:

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

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

Sonra #scrollbar-helperJavascript ile boyutunu kontrol edin :

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

Bu şekilde hesapla şeye gerek yok, divher zaman olacaktır widthve heightbir scrollbar.

Tek dezavantajı, divşablonlarınızda boş bir boşluk olacaktır . Ancak öte yandan, Javascript dosyalarınız daha temiz olacaktır, çünkü bu sadece 1 veya 2 satır kod alır.

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

Tarayıcının çoğu kaydırma çubuğu genişliği için 15 piksel kullanır

Jquery ile (yalnızca firefox'ta test edilmiştir):

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

Ama aslında @ Steve'in cevabını daha iyi seviyorum.

Bu harika bir cevap: https://stackoverflow.com/a/986977/5914609

Ancak benim durumumda işe yaramadı. Çözüm bulmak için saatler harcadım.
Sonunda yukarıdaki kod döndü ve ekledi! Her stil için önemli. Ve işe yaradı.
Orijinal cevabın altına yorum ekleyemiyorum. İşte düzeltme:

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

Bu ömür boyu kesmek kararı, tarayıcı scrollY genişliğini (vanilya JavaScript) bulma fırsatı verecektir . Bu örneği kullanarak , mevcut tasarım anlayışınıza göre kaydırma yapması gerekmeyen öğeler de dahil olmak üzere herhangi bir öğede scrollY genişliğini elde edebilirsiniz :

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

Ofset genişliği farkına dayanan daha özlü ve okunması kolay çözüm:

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;

}

Bkz. JSFiddle .

Zaten kütüphanemde kodlanmış, işte burada:

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

JQuery $(window).width()yerine de kullanılabilir bahsetmek gerekirwindow.document.documentElement.clientWidth .

Sağdaki firefox'ta geliştirici araçlarını açarsanız çalışmaz, ancak devs penceresi altta açılırsa bunun üstesinden gelir!

window.screendesteklenmektedir quirksmode.org !

İyi eğlenceler!

Çalışıyor gibi görünüyor, ancak belki de tüm tarayıcılarda çalışan daha basit bir çözüm var mı?

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