पता लगाएँ कि क्या किसी पृष्ठ में एक लंबवत स्क्रॉलबार है?

Question

मैं बस कुछ सरल JQ / JS को जांचना चाहता हूं कि क्या वर्तमान पृष्ठ / विंडो (विशेष तत्व नहीं) में वर्टिकल स्क्रॉलबार है।

Googling मुझे सामान देती है जो इस मूल विशेषता के लिए अत्यधिक जटिल लगती है।

यह कैसे किया जा सकता है?

Answer 1

$(document).ready(function() {
    // Check if body height is higher than window height :)
    if ($("body").height() > $(window).height()) {
        alert("Vertical Scrollbar! D:");
    }

    // Check if body width is higher than window width :)
    if ($("body").width() > $(window).width()) {
        alert("Horizontal Scrollbar! D:<");
    }
});

Comments

+1 लेकिन सटीकता के लिए, यह केवल यह देखता है कि सामग्री व्यूपोर्ट से आगे बढ़ती है या नहीं। अगर की overflowसंपत्ति लाइन के साथ कहीं पर bodyसेट है hidden, तो यह काम नहीं करेगा। एक शरीर पर छिपी हुई स्थापना अत्यंत दुर्लभ है, हालांकि।

— १२:०५ पर पक्के

यह काम नहीं करता है अगर शरीर की ऊंचाई खिड़की की ऊंचाई से मेल खाती है, यही स्थिति है अगर डॉक्टर की ऊंचाई व्यूपोर्ट से मेल खाती है तो एक क्षैतिज स्क्रॉलबार जोड़ा जाता है । यह लंबवत होगा। स्क्रॉलबार लेकिन डॉक / बॉडी / विंडो ऊंचाई समान हैं; यह "वर्टिकल स्क्रॉलबार" को अलर्ट नहीं करेगा यहां तक ​​कि एक भी है।

— मोनिका सेलियो

बस मैंने सोचा था कि मुझे $(document)इसके बजाय उपयोग करना था $("body"), यह मेरे लिए तब काम करता था जब शरीर नहीं था (मेरे पास चौड़ाई / ऊंचाई पर एक पहलू अनुपात के साथ एक पूर्ण पॉज़िटिवेड कंटेनर है)

— am_

मेरे पास Chrome ब्राउज़र पर रिपोर्ट पृष्ठ है जहां यह शुरुआत में एक स्क्रॉल बार प्रदर्शित करता है और मिलीसेकंड के मामले में गायब हो जाता है जो ब्राउज़र व्यवहार की तरह दिखता है क्योंकि मैंने इसे प्रोग्राम नहीं किया था। इसलिए यह फंक्शन हमेशा मेरे मामले में सच है ..

— दश

मेरे लिए @TiuTalk $ ("बॉडी")। ऊँचाई () और $ (विंडो) .height () समान मूल्य देता है, इसके बजाय मैं $ (दस्तावेज़) .height ()> $ (विंडो) .height () का उपयोग करता हूँ। मुझे।

— सारंग

Answer 2

इसे इस्तेमाल करे:

var hasVScroll = document.body.scrollHeight > document.body.clientHeight;

यह आपको केवल तभी बताएगा कि ऊर्ध्वाधर स्क्रॉलहाइट देखने योग्य सामग्री की ऊंचाई से बड़ा है या नहीं। hasVScrollचर सही या गलत शामिल होंगे।

यदि आपको अधिक गहन जांच करने की आवश्यकता है, तो उपरोक्त कोड को निम्नलिखित में जोड़ें:

// Get the computed style of the body element
var cStyle = document.body.currentStyle||window.getComputedStyle(document.body, "");

// Check the overflow and overflowY properties for "auto" and "visible" values
hasVScroll = cStyle.overflow == "visible" 
             || cStyle.overflowY == "visible"
             || (hasVScroll && cStyle.overflow == "auto")
             || (hasVScroll && cStyle.overflowY == "auto");

Comments

+1 नाइस! और आवश्यक गणना शैली के साथ (जो वह बिंदु था जिस पर मैंने इस प्रश्न के साथ नहीं

— जुड़ने का

lol हाँ, मैं इस बात पर बहस कर रहा था कि इसे लिखने का अतिरिक्त प्रयास करना है या नहीं क्योंकि कई मामलों में इसकी आवश्यकता नहीं है।

— एंडी ई

जब भी ओवरफ़्लो 'दृश्यमान' होता है, तो यह हैवीवक्रोल के सही होने का परिणाम यह है कि स्क्रॉलहाइट क्लाइंटहाइट से अधिक है या नहीं। शायद आपका मतलब था cStyle.overflow === 'scroll'?

— बीटी

उपरोक्त कोड काम नहीं करता है। ब्राउज़र: क्रोम 56. Url: news.greylock.com/…

— सेबस्टियन

cStyle.overflow == "visible" जब तत्व है तो @BT स्क्रॉल बार दिखा सकता है document.body। लेकिन यह होना चाहिए (hasVScroll && cStyle.overflow == "दृश्यमान" और& element.nodeName == "बॉडी")। इसके अलावा आपको यह cStyle.overflow === 'scroll'इंगित करने की आवश्यकता है कि आप क्या इंगित करते हैं।

— mseifert

Answer 3

मैंने पिछले उत्तर की कोशिश की और $ ("बॉडी") काम नहीं कर रहा है। ऊँचाई () जरूरी नहीं कि पूरे html ऊँचाई का प्रतिनिधित्व करे।

मैंने निम्नानुसार समाधान को ठीक किया है:

// Check if body height is higher than window height :) 
if ($(document).height() > $(window).height()) { 
    alert("Vertical Scrollbar! D:"); 
} 

// Check if body width is higher than window width :) 
if ($(document).width() > $(window).width()) { 
    alert("Horizontal Scrollbar! D:<"); 
} 

Answer 4

आइए इस प्रश्न को मृत से वापस लाएं;) एक कारण है कि Google आपको एक सरल समाधान नहीं देता है। विशेष मामले और ब्राउज़र क्विर्क गणना को प्रभावित करते हैं, और यह उतना तुच्छ नहीं है जितना लगता है।

दुर्भाग्य से, अब तक उल्लिखित समाधानों के साथ समस्याएं हैं। मैं उन्हें बिल्कुल अलग करने का मतलब नहीं है - वे महान शुरुआती बिंदु हैं और अधिक मजबूत दृष्टिकोण के लिए आवश्यक सभी प्रमुख गुणों पर स्पर्श करते हैं। लेकिन मैं किसी भी अन्य उत्तर से कोड को कॉपी करने और चिपकाने की सिफारिश नहीं करूंगा क्योंकि

• वे विश्वसनीय क्रॉस-ब्राउज़र के रूप में पोस्ट की गई सामग्री के प्रभाव को कैप्चर नहीं करते हैं। उत्तर जो शरीर के आकार पर आधारित हैं, यह पूरी तरह से याद करते हैं (शरीर ऐसी सामग्री के ऑफसेट अभिभावक नहीं है जब तक कि यह स्वयं तैनात न हो)। और वे उत्तर जाँचते हैं $( document ).width()और दस्तावेज़ के आकार के jQuery की छोटी-छोटी पहचान का.height() शिकार होते हैं ।
• इस पर भरोसा करते हुए window.innerWidth, यदि ब्राउज़र इसका समर्थन करता है, तो आपका कोड मोबाइल ब्राउज़रों में स्क्रॉल बार का पता लगाने में विफल रहता है, जहां स्क्रॉल बार की चौड़ाई आम तौर पर 0. होती है। उन्हें अस्थायी रूप से ओवरले के रूप में दिखाया जाता है और दस्तावेज़ में जगह नहीं लेता है। । मोबाइल पर ज़ूम करना भी एक समस्या बन जाता है।
• यह पता तब लगाया जा सकता है जब लोग स्पष्ट रूप से htmlऔर bodyडिफ़ॉल्ट मानों के लिए दोनों तत्वों के अतिप्रवाह को निर्धारित करते हैं (तब क्या होता है, इसमें थोड़ा सा शामिल है - यह विवरण देखें )।
• अधिकांश उत्तरों में, बॉडी पैडिंग, बॉर्डर या मार्जिन का पता नहीं लगाया जाता है और परिणाम विकृत करते हैं।

मैंने अधिक समय बिताया है जितना मैंने एक समाधान खोजने पर सोचा होगा कि "बस काम करता है" (खांसी)। अब मैं जिस एल्गोरिथ्म के साथ आया हूं वह एक प्लगइन jQuery.isInView का हिस्सा है , जो एक .hasScrollbarविधि को उजागर करता है । यदि आप चाहें तो स्रोत पर एक नज़र डालें ।

ऐसे परिदृश्य में जहां आप पृष्ठ के पूर्ण नियंत्रण में हैं और अज्ञात सीएसएस से निपटने के लिए नहीं है, एक प्लगइन का उपयोग करना ओवरकिल हो सकता है - आखिरकार, आप जानते हैं कि कौन से किनारे मामले लागू होते हैं, और जो नहीं करते हैं। हालांकि, अगर आपको किसी अज्ञात वातावरण में विश्वसनीय परिणाम चाहिए, तो मुझे नहीं लगता कि यहां उल्लिखित समाधान पर्याप्त होंगे। आप एक अच्छी तरह से परीक्षण किए गए प्लगइन का उपयोग करके बेहतर हैं - मेरा या कोई भी elses।

Comments

धन्यवाद। थोड़ा जटिल! यदि आप पिछड़े संगत होना नहीं चाहते / चाहती हैं तो html5 ब्राउज़रों के लिए एक आसान समाधान है? मेरा मतलब है कि शायद ब्राउज़र कोडर्स / w3c सिर्फ हमें बताने के लिए पर्याप्त है कि क्या कोई तत्व पर स्क्रॉलबार हैं या नहीं? ;-)

— सिंह

@ मुझे पता नहीं है कि मुझे पता है। ठीक है, वहाँ एक है window.scrollbarsवस्तु है, जो केवल एक प्रॉपर्टी है visible। होनहार लगता है, लेकिन नहीं है। यह IE में समर्थित नहीं है, IE11 सहित। और यह सिर्फ आपको बताता है कि एक स्क्रॉल बार है - लेकिन कौन सा नहीं। परीक्षा पृष्ठ यहाँ देखें ।

— हैशचेंज

साभार @hashchange यह अविश्वसनीय बेवकूफ लगता है कि यह बताता है कि अगर कोई स्क्रॉलबार है तो मुझे लगता है कि यह अभी तक किसी तरह का परीक्षण है। हालांकि थोड़ा आशाजनक। ;-)

— सिंह

@ बीटी ओके, बढ़िया। अब मैं आपको खरगोश के छेद के प्रवेश पर ले जाता हूं;) यहां एक डेमो है जहां खिड़की को भरने के लिए सामग्री पर्याप्त नहीं है। आपकी खोज FF में काम करती है लेकिन Chrome में विफल रहती है। और यहां एक और डेमो है जहां एक तैनात तत्व पृष्ठ के नीचे रखा गया है। आपका पता Chrome में काम करता है लेकिन FF में विफल रहता है।

— हैशचेंज

@BT और मुझे लगता है कि जब हम अतिप्रवाह सेटिंग्स के साथ खेलना शुरू करते हैं तो हम अजीब विफलता मोडों के एक समूह में आ सकते हैं क्योंकि उनका व्यवहार थोड़ा अजीब है , लेकिन मैंने वहीं रोक दिया है।

— हैशचेंज

Answer 5

इसने मेरे लिए काम किया:

function hasVerticalScroll(node){
    if(node == undefined){
        if(window.innerHeight){
            return document.body.offsetHeight> window.innerHeight;
        }
        else {
            return  document.documentElement.scrollHeight > 
                document.documentElement.offsetHeight ||
                document.body.scrollHeight>document.body.offsetHeight;
        }
    }
    else {
        return node.scrollHeight> node.offsetHeight;
    }
}

शरीर के लिए, बस उपयोग करें hasVerticalScroll()।

Comments

इस सूत्र में यही एकमात्र उत्तर है जो मेरे Chrome

— Nertan Lucian

clientHeightoffsetHeightयहाँ पर बेहतर है। अन्यथा आपके पास एक मोटी सीमा हो सकती है, और वहां जाने पर स्क्रॉलबार नहीं है।

— Theicfire

Answer 6

var hasScrollbar = window.innerWidth > document.documentElement.clientWidth;

Comments

यह काम किया, धन्यवाद।

— विग्नेश चिनैयन

Answer 7

अजीब तरह से इन समाधानों में से कोई भी आपको यह नहीं बताता है कि किसी पृष्ठ में एक लंबवत स्क्रॉलबार है।

window.innerWidth - document.body.clientWidthआप स्क्रॉलबार की चौड़ाई दे देंगे। यह कुछ भी IE9 + (कम ब्राउज़रों में परीक्षण नहीं) में काम करना चाहिए। (या सख्ती से सवाल का जवाब देने के लिए,!!(window.innerWidth - document.body.clientWidth)

क्यों? मान लें कि आपके पास एक पृष्ठ है जहाँ सामग्री विंडो की ऊँचाई से अधिक है और उपयोगकर्ता ऊपर / नीचे स्क्रॉल कर सकता है। यदि आप मैक पर क्रोम का उपयोग कर रहे हैं जिसमें कोई माउस प्लग नहीं है, तो उपयोगकर्ता को स्क्रॉलबार दिखाई नहीं देगा। एक माउस प्लग करें और एक स्क्रॉलबार दिखाई देगा। (ध्यान दें कि इस व्यवहार को ओवरराइड किया जा सकता है, लेकिन यह डिफ़ॉल्ट AFAIK है)।

Comments

क्रोम-माउस व्यवहार की व्याख्या से मुझे यह पता लगाने में मदद मिली कि जो मैंने सोचा था वह असंगत व्यवहार था। धन्यवाद!

— आइसोफ

Answer 8

मुझे वनीला का घोल मिला

var hasScrollbar = function() {
  // The Modern solution
  if (typeof window.innerWidth === 'number')
    return window.innerWidth > document.documentElement.clientWidth

  // rootElem for quirksmode
  var rootElem = document.documentElement || document.body

  // Check overflow style property on body for fauxscrollbars
  var overflowStyle

  if (typeof rootElem.currentStyle !== 'undefined')
    overflowStyle = rootElem.currentStyle.overflow

  overflowStyle = overflowStyle || window.getComputedStyle(rootElem, '').overflow

    // Also need to check the Y axis overflow
  var overflowYStyle

  if (typeof rootElem.currentStyle !== 'undefined')
    overflowYStyle = rootElem.currentStyle.overflowY

  overflowYStyle = overflowYStyle || window.getComputedStyle(rootElem, '').overflowY

  var contentOverflows = rootElem.scrollHeight > rootElem.clientHeight
  var overflowShown    = /^(visible|auto)$/.test(overflowStyle) || /^(visible|auto)$/.test(overflowYStyle)
  var alwaysShowScroll = overflowStyle === 'scroll' || overflowYStyle === 'scroll'

  return (contentOverflows && overflowShown) || (alwaysShowScroll)
}

Comments

IE 11 में काम नहीं कर रहा है। window.innerWidth & document.documentElement.clientWidth हमेशा समान होते हैं।

— NLV

ठीक कर दिया। यह वही फ़ंक्शन IE 11 के लिए भी काम करता है। मुद्दा यह था - stackoverflow.com/questions/17045132/…

— NLV

मैंने क्रोम 65 में इसका परीक्षण किया और यह काम करता है। लेकिन जब मैं इसे क्षैतिज स्क्रॉलबार के लिए अनुकूलित करता हूं, तो परिणाम अजीब होता है: यदि क्षैतिज और ऊर्ध्वाधर स्क्रॉलबार दोनों प्रदर्शित होते हैं, तो window.innerWidth > document.documentElement.clientWidthयह सच है, लेकिन window.innerHeight > document.documentElement.clientHeightऐसा नहीं है। ऐसा लग रहा है कि जैसे इस मामले में यह दूसरा रास्ता था। मैं जेएस डेवलपर नहीं हूं, मुझे सिर्फ सेलेनियम परीक्षणों के लिए इसकी आवश्यकता है। मैं संकेत के लिए आभारी हूं।

— क्रिएगाक्स

Answer 9

    <script>
    var scrollHeight = document.body.scrollHeight;
    var clientHeight = document.documentElement.clientHeight;
    var hasVerticalScrollbar = scrollHeight > clientHeight;

    alert(scrollHeight + " and " + clientHeight); //for checking / debugging.
    alert("hasVerticalScrollbar is " + hasVerticalScrollbar + "."); //for checking / debugging.
    </script>

यह आपको बताएगा कि आपके पास स्क्रॉलबार है या नहीं। मैंने कुछ जानकारी शामिल की है जो डीबगिंग में मदद कर सकती है, जो जावास्क्रिप्ट अलर्ट के रूप में प्रदर्शित होगी।

क्लोजिंग बॉडी टैग के बाद इसे स्क्रिप्ट टैग में डालें।

Answer 10

मैंने Kees C. Bakker के उत्तर का एक अद्यतन संस्करण लिखा:

const hasVerticalScroll = (node) => {
  if (!node) {
    if (window.innerHeight) {
      return document.body.offsetHeight > window.innerHeight
    }
    return (document.documentElement.scrollHeight > document.documentElement.offsetHeight)
      || (document.body.scrollHeight > document.body.offsetHeight)
  }
  return node.scrollHeight > node.offsetHeight
}

if (hasVerticalScroll(document.querySelector('body'))) {
  this.props.handleDisableDownScrollerButton()
}

फ़ंक्शन सही है या गलत इस पर निर्भर करता है कि पृष्ठ पर एक लंबवत स्क्रॉलबार है या नहीं।

उदाहरण के लिए:

const hasVScroll = hasVerticalScroll(document.querySelector('body'))

if (hasVScroll) {
  console.log('HAS SCROLL', hasVScroll)
}

Answer 11

मैं उपयोग करता हूं

public windowHasScroll()
{
    return document.body.clientHeight > document.documentElement.clientHeight;
}

Answer 12

बस विंडो के भीतरी भाग के खिलाफ दस्तावेज़ रूट तत्व (यानी html तत्व) की चौड़ाई की तुलना करें:

if ((window.innerWidth - document.documentElement.clientWidth) >0) console.log('V-scrollbar active')

अगर आपको भी स्क्रॉलबार की चौड़ाई जानने की आवश्यकता है:

vScrollbarWidth = window.innerWidth - document.documentElement.clientWidth;

Answer 13

अन्य समाधानों ने मेरी एक परियोजना में काम नहीं किया और मैं अतिप्रवाह सीएसएस संपत्ति की जांच कर रहा हूं

function haveScrollbar() {
    var style = window.getComputedStyle(document.body);
    return style["overflow-y"] != "hidden";
}

लेकिन यह केवल तभी काम करेगा जब स्क्रॉलबार गायब हो जाए, तो प्रॉप बदलकर यह काम नहीं करेगा यदि सामग्री विंडो के बराबर या छोटी है।