मुझे ब्राउज़र का स्क्रॉलबार आकार कैसे मिल सकता है?

Question

मैं एक क्षैतिज स्क्रॉलबार की ऊंचाई, या एक ऊर्ध्वाधर एक की चौड़ाई को जावास्क्रिप्ट में कैसे निर्धारित कर सकता हूं?

Comments

यहाँ JQuery आयाम प्लगइन के लेखक का एक स्निपेट है। github.com/brandonaaron/jquery-getscrollbarwidth/blob/master/… इस समाधान को देने में शायद देर हो जाए, लेकिन यह मुझे एक बेहतर लगता है, IMO।

— यानिक रोचॉन

इस समाधान पर एक नज़र डालें: davidwalsh.name/detect-scrollbar-width

— GibboK

@GibboK - वह समाधान विफल हो जाता है - ऑफ़सेटविद == क्लायंटविथ यह हमेशा शून्य है। यह एज IE && Chrome में परीक्षण किया गया है।

— beauXjames

@beauXjames अजीब यह मेरे लिए एफएफ पर काम करता है

— गिब्बो

यह प्रश्न उस स्थिति में आता है जिसमें स्क्रॉलबार गलत स्थान पर है (स्क्रीन के बीच में कहीं)। इस स्थिति में आप शायद स्क्रॉलबार दिखाना नहीं चाहते हैं। ज्यादातर मामलों में मैंने iScroll को स्थिति के लिए एकदम सही डिज़ाइन-तटस्थ समाधान पाया है: iscrolljs.com

— JoostS

Answer 1

से एलेक्जेंडर गोम्स ब्लॉग मैं इसे करने की कोशिश नहीं की है। अगर यह आप के लिए काम करता है तो मुझे बतलाएगा।

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

Comments

विचार प्रतिभाशाली है, मैं निश्चित रूप से इस पर आधारित एक MooTools वर्ग बना रहा हूं।

— रयान फ्लोरेंस

हाँ, मुझे वही Google परिणाम मिला है। :) मैं कोशिश कर रहा हूं और आपको सूचित करता रहूंगा।

— glmxndr

यदि आप अलग-अलग आकार की स्क्रॉल पट्टियों के साथ अपने विषय को एक में बदलते हैं, तो वास्तविक में गणना में क्या कमी है?

— मैथ्यू वाइन

क्रॉस रेफरेंस के लिए यहां देखें: stackoverflow.com/questions/3417139/…

— यानिक रोचॉन

विभिन्न पृष्ठ ज़ूम के साथ विभिन्न मान लौटाता है। विन 7, ओपेरा, एफएफ।

— कोलुन्य्या

Answer 2

JQuery का उपयोग करके, आप मैथ्यू वाइन के जवाब को छोटा कर सकते हैं:

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

Comments

धन्यवाद, यह समाधान बहुत साफ है !!

— झेरैक्स

क्या यह समाधान वास्तव में क्लीनर महसूस करेगा यदि JQuery के लिए संपूर्ण स्रोत कोड को इससे पहले चिपकाया गया था? क्योंकि यह बहुत ज्यादा है कि यह समाधान क्या कर रहा है। इस सवाल ने JQuery में जवाब नहीं मांगा, और यह पूरी तरह से संभव है और एक पुस्तकालय के उपयोग के बिना इस कार्य को करने के लिए कुशल है।

— DaemonOfTheWest

यदि आप पहले से ही JQuery का उपयोग कर रहे हैं, तो डेमन की टिप्पणी अप्रासंगिक है। हां, ऐसा करने के लिए सिर्फ JQuery को जोड़ना बकवास होगा, लेकिन पहले से ही अपने प्रोजेक्ट में JQuery का उपयोग करने वालों के लिए, यह स्वीकार किए जाते हैं की तुलना में बहुत 'सरल' समाधान है।

— टायलर डेहले

Answer 3

यह केवल मेरे द्वारा लिखी गई स्क्रिप्ट है, जो वेबकिट ब्राउज़र में काम कर रही है ... :)

$.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, क्रोम, IE और सफारी में विंडोज 7 पर 2012-03-28 का परीक्षण किया गया और 100% काम किया।

स्रोत: http://benalman.com/projects/jquery-misc-plugins/#scrollbarwidth

Comments

चौड़ाई उस कोड में हमेशा अपरिवर्तित रहेगी। साथ ही अगर (सच्चा) {...}

— sstur

सुधार: widthहोगा हमेशा === अपरिभाषित पहले समय समारोह कहा जाता है। बाद में फ़ंक्शन के लिए कॉल widthपहले से ही सेट है, कि चेक सिर्फ गणना फिर से अनावश्यक रूप से चलाए जाने से रोकता है।

— मार्टिनएस्टी

@MartinAnsty लेकिन फ़ंक्शन के अंदर [चौड़ाई] वेरिएबल घोषित किया गया है, इसलिए हर बार जब आप फ़ंक्शन को कॉल करते हैं तो इसे फिर से बनाया जाता है।

— मैडस्कंक

@MartinAnsty, यदि आप स्रोत को देखते हैं , तो इसे बाहरी बंद होने की घोषणा की जाती है।

— TheCloudlessSky

बस @sstur और @TheCloudlessSky द्वारा बनाए गए बिंदु को सुदृढ़ करने के लिए, ऊपर का कोड बेन अल्मन के प्लगइन में से एक के समान नहीं है, और यह परिणाम को कैश नहीं करेगा width, बल्कि हर बार इसे पुनर्गणना करेगा। यह काम करता है, लेकिन यह बहुत अक्षम है। कृपया दुनिया को एक एहसान करें और इसके बजाय अल्मान के प्लगइन में सही संस्करण का उपयोग करें ।

— 13

Answer 4

यदि आप एक सरल ऑपरेशन की तलाश में हैं, तो बस सादे डोम js और jquery को मिलाएं,

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

वर्तमान पृष्ठ स्क्रॉलबार का आकार लौटाता है। (यदि यह दिखाई दे या फिर वापस आ जाए)

Comments

यह उस स्थिति में विफल हो जाएगा जब विंडो में स्क्रॉलबार नहीं थे (बड़ा मॉनिटर, या छोटा पृष्ठ / ऐप)

— फरीद नूरी नेष्टत

यह वही है जो मैं चाहता था

— azerafati

Answer 5

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

Comments

पहले स्वीकार किए गए उत्तर की कोशिश की, लेकिन पाया कि यह अब विंडोज 8 पर फ़ायरफ़ॉक्स में काम नहीं करता था। इस संस्करण में स्विच किया गया जो काम को खूबसूरती से करता है।

— मैटिज

छोटा कोड, लेकिन ब्राउज़र को पूरे पृष्ठ को फिर से बनाना है, इसलिए यह बहुत धीमा है।

— एड्रियन मैयर

Answer 6

मेरे लिए, सबसे उपयोगी तरीका था

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

वेनिला जावास्क्रिप्ट के साथ।

Comments

धन्यवाद @ स्टीफन-केंडी अभिनंदन।

— एंड्रेस मोरेनो

मुझे जिस चीज की जरूरत थी। एक सुझाव: दूसरे कार्यकाल के साथ बदला जा सकता है document.documentElement.clientWidth। documentElementअधिक स्पष्ट रूप से और सफाई से <html>तत्व प्राप्त करने का इरादा व्यक्त करता है।

— जनवरी मिकसोव्स्की

Answer 7

मुझे एक सरल समाधान मिला जो पृष्ठ के बजाय, पृष्ठ के अंदर के तत्वों के लिए काम करता है: $('#element')[0].offsetHeight - $('#element')[0].clientHeight

यह x- अक्ष स्क्रॉलबार की ऊंचाई देता है।

Comments

महान एक!! आपने मेरा दिन बना दिया :) यह y- अक्ष स्क्रॉलबार के लिए ".offsetWidth" और ".clientWidth" के साथ भी काम कर रहा है।

— पोलोसन

पूरी तरह से विश्वसनीय नहीं लगता, दुर्भाग्य से, कम से कम चौड़ाई के लिए। .clientWidth में लिनक्स के तहत फ़ायरफ़ॉक्स और क्रोम दोनों में स्क्रॉलबार की चौड़ाई को शामिल करना शामिल है।

— माइकल स्काइपर

Answer 8

से दाऊद वॉल्श के ब्लॉग :

// 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, Stackoverflow पर यहाँ 14 देता है।

Answer 9

यदि आपके पास पहले से ही इस पर स्क्रॉलबार के साथ एक तत्व है:

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

अगर कोई हॉररजसक्रॉलबार मौजूद नहीं है, तो फ़ंक्शन 0 से पीछे हट जाएगा

Comments

यह अभी तक का सबसे अच्छा जवाब है। KISS सभी नियम

— MarcD

Answer 10

आप jquery + javascript का उपयोग करके नीचे windowस्क्रॉल पट्टी निर्धारित कर सकते हैं document:

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

Comments

ध्यान दें कि इनरव्हीट IE9 + के लिए है। अन्यथा महान समाधान।

— पाएल थिंगबो

Answer 11

जिस तरह 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

Answer 12

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 में परीक्षण किया गया।

Answer 13

यह चाल चलनी चाहिए, नहीं?

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

Answer 14

एक खाली बनाएं 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;

कुछ भी गणना करने की आवश्यकता नहीं है, क्योंकि यह divहमेशा widthऔर heightका होगा scrollbar।

केवल नकारात्मक पक्ष यह है कि divआपके टेम्पलेट्स में एक खाली होगा .. लेकिन दूसरी तरफ, आपकी जावास्क्रिप्ट फाइलें क्लीनर होंगी, क्योंकि यह केवल कोड की 1 या 2 लाइनें लेता है।

Answer 15

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

Answer 16

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

अधिकतर ब्राउज़र स्क्रॉलबार की चौड़ाई के लिए 15px का उपयोग करते हैं

Answer 17

Jquery के साथ (केवल फ़ायरफ़ॉक्स में परीक्षण किया गया):

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

लेकिन मुझे वास्तव में @ स्टीव का जवाब बेहतर लगा।

Answer 18

यह एक महान जवाब है: 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);
};

Answer 19

यह जीवन-हैक निर्णय आपको ब्राउज़र स्क्रॉल चौड़ाई (वेनिला जावास्क्रिप्ट) खोजने का अवसर देगा । इस उदाहरण का उपयोग करके आप किसी भी तत्व पर स्क्रॉल चौड़ाई प्राप्त कर सकते हैं, जिसमें उन तत्वों को शामिल किया जाना चाहिए जो आपके वर्तमान डिजाइन गर्भाधान के अनुसार स्क्रॉल नहीं होने चाहिए:

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

Answer 20

यहाँ ऑफसेट चौड़ाई अंतर के आधार पर समाधान को पढ़ने के लिए अधिक संक्षिप्त और आसान है:

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 देखें ।

Answer 21

मेरी लाइब्रेरी में पहले से ही कोडित है इसलिए यह है:

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

मुझे यह उल्लेख करना चाहिए कि jQuery का $(window).width()उपयोग इसके बजाय भी किया जा सकता है window.document.documentElement.clientWidth।

यदि आप दाईं ओर फ़ायरफ़ॉक्स में डेवलपर टूल खोलते हैं तो यह काम नहीं करता है, लेकिन अगर यह नीचे की तरफ खुलता है तो यह इसे खत्म कर देता है!

window.screenसमर्थित quirksmode.org है !

मज़े करो!

Answer 22

यह काम करने लगता है, लेकिन शायद एक सरल उपाय है जो सभी ब्राउज़रों में काम करता है?

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