আমি কীভাবে ব্রাউজারের স্ক্রোলবার আকার পেতে পারি?

Question

আমি কীভাবে জাভাস্ক্রিপ্টে একটি অনুভূমিক স্ক্রোলবারের উচ্চতা বা উল্লম্বটির প্রস্থ নির্ধারণ করতে পারি?

Comments

এখানে জিকুয়েরি ডাইমেনশন প্লাগইনটির লেখকের একটি স্নিপেট। github.com/brandonaaron/jquery-getscrolbarwidth/blob/master/… এই সমাধানটি দিতে দেরি হলেও আইএমও, এটি আমার কাছে আরও ভাল বলে মনে হচ্ছে।

— ইয়ানিক রচন

এই সমাধানটি দেখুন: ডেভিডওয়ালস.নেম

— স্ক্রোলবার-

@ গিব্বোক - যে সমাধানটি ব্যর্থ - অফসেটউইথ == ক্লায়েন্টউইথ তাই এটি সর্বদা শূন্য। এটি কিনে আইআই ও এন্ড ক্রোম পরীক্ষিত হয়।

— beauXjames 14

@beauXjames অদ্ভুত এটা আমার জন্য এফএফ

— গিব্বোক

এই প্রশ্নটি এমন পরিস্থিতিতে দেখা দেয় যেখানে স্ক্রোলবারটি ভুল অবস্থানে রয়েছে (পর্দার মাঝখানে কোথাও)। এই পরিস্থিতিতে আপনি সম্ভবত কোনও স্ক্রোলবার দেখাতে চান না। বেশিরভাগ ক্ষেত্রে আমি আইসক্রলকে পরিস্থিতির জন্য নিখুঁত নকশা-নিরপেক্ষ সমাধান হিসাবে পেয়েছি

— 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

ধারণাটি প্রতিভা, আমি অবশ্যই এর ভিত্তিতে একটি এমআউটুলস ক্লাস করছি।

— রায়ান ফ্লোরেন্স

হ্যাঁ আমি একই গুগল ফলাফল পেয়েছি। :) আমি চেষ্টা করছি এবং আপনাকে অবহিত রাখছি।

— 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 ব্যবহার করে থাকেন তবে ডেমনের মন্তব্য অপ্রাসঙ্গিক। হ্যাঁ, জ্যাকুয়েরিকে যুক্ত করার জন্য এটি করা বাজে কথা হবে তবে যারা ইতিমধ্যে তাদের প্রকল্পে জ্যাকুয়ারি ব্যবহার করছেন তাদের কাছে এটি গৃহীত গৃহস্থের চেয়ে অনেক বেশি 'সরল' সমাধান।

— টাইলার ডাহলে

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

উইন্ডোজ on এ সর্বশেষ এফএফ, ক্রোম, আইই এবং সাফারি এবং ১০০% কার্যকারীতে 2012-03-28 পরীক্ষিত।

উত্স: http://benalman.com/projects/jquery-misc-plugins/#scrolbarwidth

Comments

প্রস্থ সর্বদা এই কোডটিতে অপরিবর্তিত থাকবে। পাশাপাশি হতে পারে যদি (সত্য) {...}

— স্টার

কারেকশন: widthহবে সবসময় === undefined প্রথম সময় ফাংশন বলা হয়। পরবর্তী ক্রিয়াকলাপের কলগুলিতে widthইতিমধ্যে সেট করা আছে, যাচাই কেবল অকারণে গণনা আবার চালানো রোধ করে।

— মার্টিনএন্স্টি

@ মার্টিনএন্স্টি তবে [প্রশস্ত] ভেরিয়েবলটি ফাংশনের অভ্যন্তরে ঘোষণা করা হয়, সুতরাং আপনি যখনই ফাংশনটি কল করবেন তখন এটি পুনরায় তৈরি করা হবে।

— ম্যাডসঙ্কঙ্ক

@MartinAnsty, যদি আপনি তাকান উৎস , এটা বাইরের অবসান ঘোষণা করেছে।

— দ্য ক্লাউডলেসস্কি

শুধু @sstur এবং @TheCloudlessSky দ্বারা তৈরি বিন্দু শক্তিশালী করা, কোড ঊর্ধ্বে নয় , বেন Alman এর প্লাগইন এক হিসাবে একই এবং এটি ফলাফলের ক্যাশে করা হবে না width, বরং এটা প্রতি একক সময় পুনঃগণনা। এটি কাজ করে, তবে এটি মারাত্মকভাবে অদক্ষ। দয়া করে বিশ্বকে অনুগ্রহ করুন এবং পরিবর্তে আলমানের প্লাগইনে সঠিক সংস্করণটি ব্যবহার করুন ।

— হ্যাশচেঞ্জ

Answer 4

আপনি যদি কোনও সাধারণ ক্রিয়াকলাপের সন্ধান করছেন তবে সাদামাটা ডোম জেএস এবং জ্যাকুরি মিশ্রন করুন,

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

বর্তমান পৃষ্ঠার স্ক্রোলবারের আকার প্রদান করে। (যদি এটি দৃশ্যমান হয় বা অন্যথায় 0 ফিরে আসবে)

Comments

উইন্ডোতে স্ক্রোলবার না থাকায় এটি ব্যর্থ হবে (বড় মনিটর, বা ছোট পৃষ্ঠা / অ্যাপ্লিকেশন)

— ফরিদ নুরি নেশাত

এটি আমি যা চেয়েছিলাম তা পুরোপুরি

— আজেফেরতি

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

প্রথমে গৃহীত উত্তরটি চেষ্টা করে দেখতে পেলেন যে এটি উইন্ডোজ ৮ এর ফায়ারফক্সে আর কাজ করে না this এই রূপটি পরিবর্তন করে যা কাজটি সুন্দর করে তোলে।

— মাটিজস

সংক্ষিপ্ত কোড, তবে ব্রাউজারকে পুরো পৃষ্ঠাটি আবার আঁকতে হবে, তাই এটি খুব ধীর।

— অ্যাড্রিয়ান মায়ার

Answer 6

আমার জন্য, সবচেয়ে দরকারী উপায় ছিল

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

ভ্যানিলা জাভাস্ক্রিপ্ট সহ।

Comments

ধন্যবাদ @ স্টিফেন-কেনেডি। একটি শুভেচ্ছা.

— আন্দ্রেস মোরেনো

ঠিক যেটা আমার দরকার ছিল. একটি পরামর্শ: দ্বিতীয় পদটি দিয়ে প্রতিস্থাপন করা যেতে পারে document.documentElement.clientWidth। documentElementআরও পরিষ্কার এবং পরিষ্কারভাবে <html>উপাদান পাওয়ার অভিপ্রায় প্রকাশ করে ।

— জান মিকসভস্কি

Answer 7

আমি একটি সহজ সমাধান পেয়েছি যা পৃষ্ঠাটির পরিবর্তে পৃষ্ঠার অভ্যন্তরের উপাদানগুলির জন্য কাজ করে: $('#element')[0].offsetHeight - $('#element')[0].clientHeight

এটি এক্স-অক্ষ স্ক্রোলবারের উচ্চতা ফেরায় returns

Comments

ভাল একটা!! আপনি আমার দিনটি তৈরি করেছেন :) এটি y। অক্ষ স্ক্রোলবারগুলির জন্য ".OfsetWidth" এবং ".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 দেয়, 14 স্ট্যাকওভারফ্লোতে।

Answer 9

আপনার যদি ইতিমধ্যে এতে কোনও স্ক্রোলবার ব্যবহার করে থাকে:

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

যদি কোনও হরজিন্টস্রোলবার উপস্থিত না থাকে তবে ফাংশনটি 0 এ আবার চালু হবে

Comments

এটি এখনও সেরা উত্তর। KISS সমস্ত নিয়ম করে

— মার্চডি

Answer 10

আপনি jquery + জাভাস্ক্রিপ্ট ব্যবহার করে নীচে হিসাবে windowস্ক্রোল বার নির্ধারণ করতে পারেন document:

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

Comments

নোট করুন যে অভ্যন্তরীণ প্রস্থটি আই 9 + এর জন্য। অন্যথায় দুর্দান্ত সমাধান।

— পল থিংবা

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/antiscrol/blob/master/antiscrol.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
    };
},

ক্রোম, এফএফ, আইই 8, আই 11 এ পরীক্ষিত।

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

জ্যাকুরি (শুধুমাত্র ফায়ারফক্সে পরীক্ষা করা) সহ:

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;

}

জেএসফিডল দেখুন ।

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