जांचें कि HTML तत्व में स्क्रॉलबार हैं या नहीं

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')) के लिए परीक्षण करने के लिए सीएसएस अतिप्रवाह संपत्ति भी नहीं ला सकते थे ?

— vol7ron

यह कई मामलों में विफल रहता है। यदि आपके तत्व में अतिप्रवाह है: दृश्यमान; चौड़ाई: 200px; और 500px की चौड़ाई वाला एक बच्चा है, आपके तत्व में कोई स्क्रॉल पट्टियाँ नहीं हैं, लेकिन 500px की एक स्क्रॉल-चौड़ाई और 200px का एक ग्राहक-चिह्न है।

— जोसेफ लेनॉक्स

यदि अतिप्रवाह दिखाई देता है या छिपा हुआ है, तो आमतौर पर स्क्रॉलबार नहीं होते हैं।

— ह्यूबर्ट ग्रेज्सकोविआक

Answer 2

प्रयत्न:

वर्टिकल स्क्रॉल बार के लिए

el.scrollHeight> el.clientHeight

क्षैतिज स्क्रॉलबार के लिए

el.scrollWidth> el.clientWidth

मुझे पता है कि यह IE8 और फ़ायरफ़ॉक्स 3.6+ के लिए कम से कम काम करता है।

Comments

मैंने इसे हां कहा है कि यह मुझे बताता है कि एक निश्चित तत्व जितना लगता है उससे कहीं अधिक बड़ा है, लेकिन इसका मतलब यह नहीं है कि यह स्क्रॉलबार प्रदर्शित करता है। यह भी हो सकता है overflow:hiddenऔर यह अब स्क्रॉल नहीं होगा।

— राबर्ट कोरीटनिक

और clientHeight / clientWidth मानों के साथ जाँच करना अच्छे परिणाम नहीं देता है, क्योंकि तत्वों में सीमाएँ भी हो सकती हैं, जो इस उपाय में शामिल नहीं हैं। मेरे सूत्र की जाँच करें। यह आपकी तुलना में बेहतर काम करता है।

— राबर्ट कोरिटनिक

यह क्लाइंटहाइट / क्लाइंटविथ के बजाय स्क्रॉलबारों की जांच के लिए ऑफसेटहाइट / ऑफसेटविट का उपयोग करने के बारे में सच है। यह बात बताने के लिए धन्यवाद।

— गैरी

@RobertKoritnik - तो बस जांचें कि क्या उस विशिष्ट तत्व overflow:hiddenपर है ... यह अभी भी मेरी राय में सही उत्तर है, क्योंकि यह सबसे सरल है।

— vsync

Answer 3

यह थोड़ा हैकिश लग सकता है (या हो सकता है) , लेकिन आप scrollTopऔर scrollLeftगुणों का परीक्षण कर सकते हैं।

यदि वे 0 से अधिक हैं, तो आप जानते हैं कि स्क्रॉलबार हैं। यदि वे 0 हैं, तो उन्हें 1 पर सेट करें, और उन्हें फिर से देखने के लिए देखें कि क्या आपको 1. का परिणाम मिला है। फिर उन्हें 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 इस संपत्ति का समर्थन कर सकता है। (मैं अभी IE का परीक्षण नहीं कर सकता।)

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

Comments

यदि आप तुलना करते हैं offsetHeightऔर स्क्रॉलबार के लिए जांचना बहुत आसान है clientHeight। स्क्रॉलबार मौजूद होने पर स्क्रॉलबार के आकार से उत्तरार्द्ध हमेशा छोटा होता है।

— रॉबर्ट कोरिटनिक

@ रॉबर्ट: आसान के बारे में निश्चित नहीं है, लेकिन मुझे लगता है कि यह कैसे काम करता है। तब मुझे लगता है कि अगर कोई तत्व है overflow:scroll, तो आप चाहते हैं कि स्क्रॉल करने योग्य के रूप में रिपोर्ट किया जाए या नहीं, स्क्रॉलबार सक्षम हैं। निश्चित रूप से मेरे समाधान में समस्याएँ हो सकती हैं यदि कोई ऑनस्क्रीन ट्रोल घटना जुड़ी हो।

— user113716

ज़रुरी नहीं। यदि आप मेरे jQuery प्लगइन की जांच करते हैं तो मुझे वास्तविक स्क्रॉल करने योग्य पूर्वजों को खोजना होगा अन्यथा मैं किसी तत्व को देखने में स्क्रॉल नहीं कर सकता।

— राबर्ट कोरिटनिक

@RobertKoritnik सच नहीं है; कुछ ब्राउज़र में स्क्रॉलबार हो सकते हैं जो चौड़ाई को कम नहीं करते हैं। उदाहरण के लिए एक OS X पर। या उपकरणों को स्पर्श करें।

— 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)। अन्यथा यह सबसे सही समाधान प्रतीत होता है।

— जेक

@ जेक अगर स्क्रॉलहाइट <क्लाइंटहॉल स्क्रॉल ओवरफ्लो पर, स्क्रॉलबार वहां जा रहे हैं, लेकिन वे अक्षम होने जा रहे हैं (यानी तत्व स्क्रॉल करने योग्य नहीं है)। इसलिए मुझे लगता है कि यह आवेदन पर निर्भर करता है। आपका संशोधन आपके लिए मान्य है कि आप केवल स्क्रॉलबार के लिए जांचना चाहते हैं, यह राज्य के लिए महत्वपूर्ण नहीं है। मेरे लिए, जब मैं इस के साथ आया, तो मैं एक घटक के लिए ऑटोस्कोप को लागू करना चाह रहा था, इसलिए उस मामले में अक्षम स्क्रॉलबार होना बेकार है। यह भी इस सवाल के लिए मामला प्रतीत होता है (यह "मनुष्यों द्वारा स्क्रॉल किया जाना चाहिए")

— लतीफ

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. यदि ClientWidth ऑफसेट-राइट बॉर्डर से कम है (गणना / कैस्केड / वर्तमान शैली के माध्यम से फिर से पाया जाता है), तो आप जानते हैं कि आपके पास एक स्क्रॉलबार है।

ऊर्ध्वाधर (ऑफसेट / क्लाइंटहाइट) के लिए भी ऐसा ही करें।

IE7 कुछ तत्वों के लिए 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

मुझे लगता है कि आप स्क्रॉलहाइट और क्लाइंटहाइट चाहते हैं: stackoverflow.com/questions/4106538/…

— अमीर remer

Answer 8

के लिए IE11 (इंटरनेट एक्सप्लोरर 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;

ऐसा इसलिए है क्योंकि IE स्क्रॉलहाइट की रिपोर्ट करता है क्योंकि क्लाइंटहाइट से 1 बड़ा है जब कोई स्क्रॉलबार मौजूद नहीं है, लेकिन स्क्रॉल के मौजूद होने पर लगभग 9 बड़ा होता है।

Answer 9

अगर आपको यह जानने की जरूरत है कि क्या पूरे वेबपेज के लिए एक स्क्रॉलबार मौजूद है और पूर्ण ब्राउज़र समर्थन के साथ आप इसका उपयोग कर सकते हैं:

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

यह उपयोग करने के लिए महत्वपूर्ण है window.innerHeightके बजाय document.body.clientHeightक्योंकि कुछ मोबाइल ब्राउज़र में clientHeight पता पट्टी का आकार नहीं मिलेगा लेकिन scrollHeight होगा, तो आप गलत गणना मिलता है।

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% व्यापक तत्व जोड़ें। फिर छिपे हुए को अतिप्रवाह सेट करें। यदि तत्व की गणना की गई शैली (jQ से) बदलती है, तो अभिभावक के पास स्क्रॉलबार था।

संपादित करें: ऐसा लगता है कि आप getComputedStyle की तरह एक क्रॉस ब्राउज़र विधि चाहते हैं । प्रयत्न:

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 का उपयोग करने से बचना चाहूंगा।

— रॉबर्ट कोरिटनिक 22

CSS स्टाइल आपको यह नहीं बताएंगे कि किसी तत्व में स्क्रॉलबार है या नहीं । केवल यह स्क्रॉल स्क्रॉल हो सकता है या नहीं । हो सकता है कि आंतरिक तत्व की चौड़ाई का निर्धारण करने के लिए एक क्रॉस ब्राउज़र विधि मिल जाए?

— सौम्या

@ सौम्य 92: स्क्रॉल करने योग्य और वास्तविक आकार के बीच आकार की तुलना तुच्छ है और मैंने इसे ऊपर लिखा है ... मुझे अब केवल एक विशेष तत्व पर वर्तमान अतिप्रवाह सेटिंग के लिए जांचने की आवश्यकता है।

— रॉबर्ट कोरिटनिक 22

@ Soumya92: यह वही है जो मुझे चाहिए। यह बहुत ही सरलीकृत किया जा सकता है साथ ही coalesce का उपयोग करकेcomputedStyle = el.currentStyle || document.defaultView.getComputedStyle(el, null);

— रॉबर्ट कोरिटनिक

एक और बात: यह कैसे पार ब्राउज़र है? इसके लिए कौन से ब्राउज़र समर्थित हैं?

— राबर्ट कोरीटनिक