এইচটিএমএল উপাদানটিতে স্ক্রোলবার রয়েছে কিনা তা পরীক্ষা করুন

Question

কোনও উপাদানটির স্ক্রোল বার রয়েছে কিনা তা যাচাই করার দ্রুততম উপায় কী?

একটি বিষয় অবশ্যই যাচাই করে দেখছে যে উপাদানটি তার ভিউপোর্টের চেয়ে বড় কিনা, যা সহজেই এই দুটি মান পরীক্ষা করে করা যেতে পারে:

el.scrollHeight > el.offsetHeight || el.scrollWidth > el.offsetWidth

তবে এর অর্থ এই নয় যে এটিতেও স্ক্রোলবার রয়েছে (যাতে এটি আসলে মানুষ দ্বারা স্ক্রোল করা যায়)।

প্রশ্ন

আমি কীভাবে কেবল 1 ক্রস ব্রাউজারে এবং 2 টি জাভাস্ক্রিপ্টে ( কোনও jQuery হিসাবে নেই ) উপায়ে স্ক্রোলবারগুলি কীভাবে পরীক্ষা করব ?

শুধুমাত্র জাভাস্ক্রিপ্ট, কারণ আমার যতটা সম্ভব ছোট ওভারহেড প্রয়োজন, কারণ আমি খুব দ্রুত jQuery নির্বাচক ফিল্টারটি লিখতে চাই

// check for specific scrollbars
$(":scrollable(x/y/both)")

// check for ANY scrollbar
$(":scrollable")

আমি মনে করি আমাকে overflowস্টাইল সেটিংস পরীক্ষা করতে হবে তবে আমি ক্রস ব্রাউজারে এটি কীভাবে করব?

অতিরিক্ত সম্পাদনা

কেবল overflowস্টাইল সেটিংসই নয়। কোনও উপাদানটির কোনও স্ক্রোলবার রয়েছে কিনা তা যাচাই করা ততটা তুচ্ছ নয়। উপরে আমি প্রথম সূত্রটি লিখেছি যখন উপাদানটির কোনও সীমানা না থাকে তবে এটি কার্যকর হয় (বিশেষত যখন সীমানা যথেষ্ট প্রস্থের হয়) তখন offsetমাত্রা scrollমাত্রার চেয়েও বড় হতে পারে তবে উপাদানটি এখনও স্ক্রোলযোগ্য হতে পারে। offsetউপাদানটির আসল স্ক্রোলযোগ্য ভিউপোর্ট পেতে আমাদের মাত্রা থেকে সীমানাগুলি বিয়োগ করতে হবে এবং এটি scrollমাত্রার সাথে তুলনা করতে হবে ।

ভবিষ্যতের রেফারেন্সের জন্য

:scrollablejQuery নির্বাচক ফিল্টার আমার .scrollintoview()jQuery প্লাগইন অন্তর্ভুক্ত করা হয়েছে । আমার ব্লগ পোস্টে কারও যদি প্রয়োজন হয় তবে সম্পূর্ণ কোডটি পাওয়া যাবে । যদিও এটি প্রকৃত সমাধান সরবরাহ করেনি সৌম্যের কোড আমাকে সমস্যা সমাধানে যথেষ্ট সহায়তা করেছিল। এটি আমাকে সঠিক দিকে নির্দেশ করেছিল।

Answer 1

কয়েক সপ্তাহ আগে আমি এটি কোথাও খুঁজে পেয়েছি। এটা আমার জন্য কাজ করেছে।

var div = document.getElementById('container_div_id');

var hasHorizontalScrollbar = div.scrollWidth > div.clientWidth;
var hasVerticalScrollbar = div.scrollHeight > div.clientHeight;

/* you'll get true/false */

Comments

আপনার অবশ্যই একটি সরল উদাহরণ রয়েছে। যদি আপনার ধারক এটি overflow:hiddenসেট করা আছে? অতিরিক্ত সামগ্রী থাকতে হবে তবে এটি এখনও স্ক্রোলযোগ্য নয়। সমস্যাটি যতটা সহজ মনে হচ্ছে তত সহজ নয়।

— রবার্ট কোরিতনিক

এটি গ্রহণযোগ্য সমাধান নাও হতে পারে, তবে এটি আমার পক্ষে কাজ করেছে। আমি নিশ্চিত না যে এটি লুকিয়ে থাকলে আপনি কেন এটি স্ক্রোল করবেন।

— vol7ron

এটি গ্রহণযোগ্য সমাধান নাও হতে পারে, তবে এটি আমার পক্ষে কাজ করেছে। রবার্ট, এই ক্ষেত্রে, আপনি কি সেই ক্ষেত্রে (যেমন div.scrollHeight>div.clientHeight && !(div.style.overflow && div.style.overflow == 'hidden')) পরীক্ষার জন্য CSS ওভারফ্লো সম্পত্তি পেতে পারেন না ?

— vol7ron

এটি অনেক ক্ষেত্রে ব্যর্থ হয়। যদি আপনার উপাদানটির ওভারফ্লো হয়: দৃশ্যমান; প্রস্থ: 200px; এবং 500px প্রস্থ সহ একটি শিশু রয়েছে, আপনার উপাদানটির কোনও স্ক্রোল বার নেই তবে 500px এর একটি স্ক্রোলউইথ এবং 200px এর ক্লায়েন্টউইথ রয়েছে।

— জোসেফ লেনাক্স

যদি ওভারফ্লো দৃশ্যমান বা লুকানো থাকে তবে সাধারণত কোনও স্ক্রোলবার থাকে না।

— হুবার্ট গ্রেজস্কোইয়াক

Answer 2

চেষ্টা করুন:

উল্লম্ব স্ক্রোল বারের জন্য

el.scrolHeight> el.clientHeight

অনুভূমিক স্ক্রোলবারের জন্য

el.scrolWidth> el.clientWidth

আমি জানি যে এটি IE8 এবং ফায়ারফক্স 3.6+ এর জন্য কাজ করে।

Comments

আমি এটিকে হ্যাঁ করে দেখিয়েছি যে এটি আমাকে বলে যে একটি নির্দিষ্ট উপাদানটি তার চেয়ে বড় আকারের বলে মনে হয়, তবে এর অর্থ এটি স্ক্রোলবারগুলি প্রদর্শন করে না। এটি পাশাপাশি থাকতে পারে overflow:hiddenএবং এটি আর স্ক্রোলযোগ্য হবে না।

— রবার্ট কোরিটনিক

এবং ক্লায়েন্টহাইট / ক্লায়েন্টউইথ মানগুলির সাথে চেক করা ভাল ফলাফল দেয় না, কারণ উপাদানগুলির পাশাপাশি সীমানাও থাকতে পারে, যা এই পরিমাপের অন্তর্ভুক্ত নয়। আমার সূত্রটি পরীক্ষা করুন। এটি আপনার চেয়ে ভাল কাজ করে।

— রবার্ট কোরিটনিক

এটি ক্লায়েন্টহাইট / ক্লায়েন্টউইথের পরিবর্তে স্ক্রোলবারগুলি পরীক্ষা করার জন্য অফসেটহাইট / অফসেটউইথ ব্যবহার সম্পর্কে সত্য। যে ইশারা জন্য ধন্যবাদ।

— গ্যারি

@ রবার্টকরিটনিক - সুতরাং কেবলমাত্র সেই নির্দিষ্ট উপাদানটির মধ্যে এটি আছে কিনা তা পরীক্ষা overflow:hiddenকরে দেখুন ... এটি এখনও আমার মতে সঠিক উত্তর, কারণ এটি সবচেয়ে সহজ।

— ভিসিএনসি

Answer 3

এটি সামান্য হ্যাকিশ মনে হতে পারে (বা হতে পারে) তবে আপনি এর বৈশিষ্ট্য scrollTopএবং scrollLeftবৈশিষ্ট্যগুলি পরীক্ষা করতে পারেন ।

যদি সেগুলি 0 এর চেয়ে বেশি হয় তবে আপনি জানেন যে এখানে স্ক্রোলবার রয়েছে। যদি তারা 0 হয়, তবে তাদের 1 এ সেট করুন এবং 1 এর ফলাফল পেয়েছেন কিনা তা দেখতে তাদের আবার পরীক্ষা করুন Then তারপরে সেগুলি 0 এ সেট করুন।

উদাহরণ: http://jsfiddle.net/MxpR6/1/

function hasScroll(el, direction) {
    direction = (direction === 'vertical') ? 'scrollTop' : 'scrollLeft';
    var result = !! el[direction];

    if (!result) {
        el[direction] = 1;
        result = !!el[direction];
        el[direction] = 0;
    }
    return result;
}

alert('vertical? ' + hasScroll(document.body, 'vertical'));
alert('horizontal? ' + hasScroll(document.body, 'horizontal'));

আমি বিশ্বাস করি IE এর জন্য আলাদা সম্পত্তি আছে, তাই আমি এটি দিয়ে এক মিনিটে আপডেট করব।

সম্পাদনা: আইই এই সম্পত্তিটিকে সমর্থন করতে পারে বলে মনে হচ্ছে। (আমি এখনই IE পরীক্ষা করতে পারি না।)

http://msdn.microsoft.com/en-us/library/ms534618(VS.85).aspx

Comments

আপনি যদি তুলনা করেন offsetHeightএবং করেন তবে স্ক্রোলবারগুলি পরীক্ষা করা অনেক সহজ clientHeight। যখন স্ক্রোলবার উপস্থিত থাকে তারপরেরটি স্ক্রোলবার আকারের সাথে সর্বদা ছোট থাকে।

— রবার্ট কোরিটনিক

@ রবার্ট: সহজ সম্পর্কে নিশ্চিত নন, তবে এটি কীভাবে কাজ করে তা আমি দেখতে পাই। তারপরে আমি ধরে নিই যে কোনও উপাদান রয়েছে কিনা overflow:scroll, আপনি চান যে স্ক্রোলবারগুলি সক্ষম কিনা তা স্ক্রোলযোগ্য হিসাবে রিপোর্ট করা উচিত। কোনও অনস্ক্রোল ইভেন্ট সংযুক্ত থাকলে অবশ্যই আমার সমাধানে সমস্যা হতে পারে।

— ব্যবহারকারী 113716

আসলে তা না. আপনি যদি আমার jQuery প্লাগইন চেক করেন তবে আমাকে সত্যিকারের স্ক্রোলযোগ্য পূর্বপুরুষটি খুঁজে পেতে হবে অন্যথায় আমি কোনও উপাদান দর্শনে স্ক্রোল করতে পারি না।

— রবার্ট কোরিটনিক

পুনঃটুইট কিছু ব্রাউজারের স্ক্রোলবার থাকতে পারে যা প্রস্থ হ্রাস করে না। উদাহরণস্বরূপ একটি ওএস এক্সে। বা ডিভাইস স্পর্শ করুন।

— daniel.gindi

সর্বদা মিথ্যা ফিরিয়ে দিন

— ফাতিহ এওরোল

Answer 4

এখানে আরও একটি সমাধান রয়েছে:

কিছু লোক যেমন উল্লেখ করেছে, কেবলমাত্র অফসেটহাইট এবং স্ক্রোলহাইটের তুলনা করা যথেষ্ট নয়, কারণ তারা ওভারফ্লো লুকানো ইত্যাদির সাথে আলাদা আলাদা উপাদানগুলির মধ্যে পৃথক, যেখানে এখনও স্ক্রোলবার নেই। সুতরাং আমি এখানেও পরীক্ষা করে নিচ্ছি যে উপাদানটির জন্য গণিত শৈলীতে ওভারফ্লো স্ক্রোল বা অটো আছে:

var isScrollable = function(node) {
  var overflowY = window.getComputedStyle(node)['overflow-y'];
  var overflowX = window.getComputedStyle(node)['overflow-x'];
  return {
    vertical: (overflowY === 'scroll' || overflowY === 'auto') && node.scrollHeight > node.clientHeight,
    horizontal: (overflowX === 'scroll' || overflowX === 'auto') && node.scrollWidth > node.clientWidth,
  };
}

Comments

যদি overflow*হয় scrollসেখানে সবসময় একটি স্ক্রলবার হবে, সুতরাং আমি মনে করি যদি আপনি চান vertical: overflowY === 'scroll' || overflowY === 'auto' && node.scrollHeight > node.clientHeight, ইত্যাদি (অর্থাত বন্ধনী তাই অপসারণ scroll*বনাম client*শুধুমাত্র পরীক্ষা করা হয় যখন overflow*হয় auto)। অন্যথায় এটি সবচেয়ে সঠিক সমাধান বলে মনে হয়।

— জেক

@ জেক যদি স্ক্রোলহাইট <ক্লায়েন্টহাইট স্ক্রোল ওভারফ্লোতে থাকে তবে স্ক্রোলবারগুলি সেখানে থাকবে তবে তারা অক্ষম হতে চলেছে (যেমন উপাদানটি স্ক্রোলযোগ্য নয়)। সুতরাং আমি মনে করি এটি প্রয়োগের উপর নির্ভর করে। আপনার পরিবর্তনটি আপনার পক্ষে বৈধ যে কেবলমাত্র স্ক্রোলবারগুলি পরীক্ষা করতে চান, রাষ্ট্রের কোনও ব্যাপার নয়। আমার জন্য, যখন আমি এটি নিয়ে এসেছি, আমি কোনও উপাদানটির জন্য অটস্ক্রোল প্রয়োগ করার জন্য সন্ধান করছিলাম, সুতরাং স্ক্রোলবার অক্ষম করা সেই ক্ষেত্রে অকার্যকর। এই প্রশ্নের ক্ষেত্রেও এটি প্রদর্শিত হবে (এটি "মানুষ দ্বারা স্ক্রোল করা দরকার")

— লতিফ 8:38

Answer 5

আমি পার্টিতে কিছুটা দেরি করেছি, তবে ...

আমি বিশ্বাস করি আপনি e.offsetWidth বনাম e.clientWidth সহ স্ক্রোলবারগুলি সনাক্ত করতে পারেন। অফসেট প্রস্থে সীমানা এবং স্ক্রোলবার, প্যাডিং এবং প্রস্থ অন্তর্ভুক্ত রয়েছে। ক্লায়েন্ট প্রস্থ প্যাডিং এবং প্রস্থ অন্তর্ভুক্ত। দয়া করে দেখুন:

https://developer.mozilla.org/en/DOM/element.offsetWidth (দ্বিতীয় চিত্র) https://developer.mozilla.org/en/DOM/element.clientWidth (দ্বিতীয় চিত্র)

আপনার যাচাই করা দরকার:

1. গুণিত / ক্যাসকেড / বর্তমান শৈলী ব্যবহার করে উপাদানটির ওভারফ্লো সেট অটো / স্ক্রোল (ওভারফ্লোএক্স / ওয়াই সহ) সেট করা আছে কি না।
2. যদি উপাদানটিতে ওভারফ্লো থাকে তবে অটো / স্ক্রোল এ সেট করুন। অফসেটউইথ এবং ক্লায়েন্টউইথ স্থাপন করুন।
3. ক্লায়েন্টউইথ যদি অফসেটউইথ - ডান সীমানা (গণিত / ক্যাসকেড / বর্তমান শৈলীর মাধ্যমে আবার পাওয়া যায়) এর চেয়ে কম হয় তবে আপনি জানেন যে আপনার কাছে একটি স্ক্রোলবার রয়েছে।

উল্লম্ব (অফসেট / ক্লায়েন্টহাইট) এর জন্যও এটি করুন।

আইই 7 কিছু উপাদানগুলির জন্য ক্লায়েন্টের উচ্চতা 0 এর প্রতিবেদন করে (কেন আমি তা পরীক্ষা করিনি), সুতরাং আপনার সর্বদা প্রথম ওভারফ্লো চেক প্রয়োজন।

আশাকরি এটা সাহায্য করবে!

Answer 6

স্ক্রোলবারগুলির অস্তিত্ব যাচাইয়ের ক্ষেত্রে বেশ কয়েকটি সমস্যা রয়েছে যার মধ্যে একটি হ'ল ম্যাকটিতে আপনার কোনও দৃশ্যমান স্ক্রোলবার নেই তাই উপরের সমস্ত সমাধানই আপনাকে সঠিক উত্তর দেয় না।

সুতরাং ব্রাউজারটির রেন্ডারিং খুব ঘন ঘন না হওয়ার কারণে আপনি স্ক্রোল পরিবর্তন করে আবার সেট করে সেট করে থাকা স্ক্রোলটি পরীক্ষা করতে পারেন:

const hasScrollBar = (element) => {
  const {scrollTop} = element;

  if(scrollTop > 0) {
    return true;
  }

  element.scrollTop += 10;

  if(scrollTop === element.scrollTop) {
    return false;
  }

  // undoing the change
  element.scrollTop = scrollTop;
  return true;
};

Answer 7

উপরের সমাধানগুলির কোনওটিই আমার পক্ষে কার্যকর হয়নি বলে কেবল এখানে ঘোরাঘুরি (এতদূর)। ডিভের স্ক্রোলহাইট এর অফসেটহাইটের সাথে তুলনা করে আমি কিছু সাফল্য পেয়েছি

var oh = $('#wrapDiv').get(0).offsetHeight;
var sh = $('#wrapDiv').get(0).scrollHeight;

মনে হচ্ছে এখুনি আমাকে একটা নির্ভুল তুলনা দেওয়া হচ্ছে ... কেউ বৈধ কিনা জানেন?

Comments

আমার মনে হয় আপনি scrollHeight এবং clientHeight চাই: stackoverflow.com/questions/4106538/...

— সমৃদ্ধ remer

Answer 8

আইই 11 এর জন্য (ইন্টারনেট এক্সপ্লোরার 11) আমাকে যুক্তিটি পরিবর্তন করতে হয়েছিল:

// Subtract 3 (a small arbitrary number) to allow for IE reporting a difference of 1 when no scrollbar is present
var hasVerticalScrollbar = div.scrollHeight - 3 > div.clientHeight;

এর কারণ আইই স্ক্রলহাইটকে ক্লায়েন্টহাইটের চেয়ে 1 টি বড় হিসাবে প্রতিবেদন করে যখন কোনও স্ক্রোলবার উপস্থিত না থাকে তবে প্রায় 9 টি বড় যখন একটি স্ক্রোলবার উপস্থিত থাকে

Answer 9

পুরো ওয়েবপৃষ্ঠায় এবং সম্পূর্ণ ব্রাউজার সমর্থন সহ কোনও স্ক্রোলবার উপস্থিত রয়েছে কিনা তা আপনার যদি জানতে প্রয়োজন তবে আপনি এটি ব্যবহার করতে পারেন:

const hasScrollbar = document.body.scrollHeight > window.innerHeight

window.innerHeightপরিবর্তে এটি ব্যবহার করা গুরুত্বপূর্ণ document.body.clientHeightকারণ কিছু মোবাইল ব্রাউজারে ক্লায়েন্টহাইট অ্যাড্রেস বারের আকার না পেয়ে স্ক্রোলহাইটটি পাবেন, যাতে আপনি ভুল গণনা পান।

Answer 10

এই উত্তরগুলির কোনওটিই সঠিক নয়। আপনার এটি ব্যবহার করতে হবে:

var div = document.getElementById('container_div_id');

var hasHorizontalScrollbar = (div.offsetWidth > div.clientWidth);
var hasVerticalScrollbar = (div.offsetHeight > div.clientHeight);

Comments

এটি হ্রাস পেয়েছে কারণ এটি 6 বছর আগে থেকে গৃহীত উত্তর থেকে অনুলিপি / আটকানো হয়েছে এবং কোনও কিছু বুলিয়ান রূপান্তর করার জন্য আপনার প্রথম বন্ধনী প্রয়োজন নেই।

— মোটো

Answer 11

এটির ভিতরে একটি 100% প্রশস্ত উপাদান যুক্ত করুন। তারপরে লুকানোতে ওভারফ্লো সেট করুন। যদি উপাদানটির গণিত শৈলী (জিকিউ থেকে) পরিবর্তন হয় তবে পিতামাতার একটি স্ক্রোলবার ছিল।

সম্পাদনা: দেখে মনে হচ্ছে আপনি getComputesStyle এর মতো ক্রস ব্রাউজার পদ্ধতি চান । চেষ্টা করুন:

function getCSS(_elem, _style)
{
    var computedStyle;
    if (typeof _elem.currentStyle != 'undefined')
        computedStyle = _elem.currentStyle;
    else
        computedStyle = document.defaultView.getComputedStyle(_elem, null);
    return computedStyle[_style];
}

Comments

আমি যদি এর জন্য ইতিমধ্যে jQuery ব্যবহার করি তবে আমি কেবল এটি করব $(el).css("overflow/overflowX/overflowY")এবং দেখুন এটি অটো বা স্ক্রোলে সেট করা আছে কিনা । তবে আমি jQuery ব্যবহার এড়াতে চাই।

— রবার্ট কোরিটনিক

সিএসএস শৈলীগুলিতে কোনও উপাদানটির স্ক্রোলবার রয়েছে কিনা তা আপনাকে জানায় না । কেবল এটির স্ক্রোলবার থাকতে পারে কিনা । অভ্যন্তরীণ উপাদানটির প্রস্থ নির্ধারণের জন্য কোনও ক্রস ব্রাউজার পদ্ধতি খুঁজে পেতে পারেন?

— সৌম্য

@ সৌম্য ৯২: স্ক্রোলযোগ্য এবং প্রকৃত আকারের মধ্যে আকারের তুলনা তুচ্ছ এবং আমি এটি উপরে লিখেছি ... আমাকে এখন যা যাচাই করা দরকার তা কেবলমাত্র একটি নির্দিষ্ট উপাদানের বর্তমান ওভারফ্লো সেটিংয়ের জন্য।

— রবার্ট কোরিটনিক

@ সৌম্য ৯২: আমার ঠিক এটি দরকার। এটি computedStyle = el.currentStyle || document.defaultView.getComputedStyle(el, null);

— কোলেসেস

আরও একটি বিষয়: ক্রস ব্রাউজারটি এটি কেমন? কোন ব্রাউজারগুলি এটি দ্বারা সমর্থিত?

— রবার্ট কোরিটনিক