दिलचस्प पोस्ट
जावा रनटाइम। एक्सएसी () गिट संघर्ष मार्कर कैसे जावा स्मृति पूल विभाजित है? श्रृंखलन कार्य कैसे काम करते हैं? एक और जीआईटी शाखा में अपने स्थानीय अनकही परिवर्तनों को कैसे मर्ज करने के लिए? एसडीके में एंड्रॉइड बैटरी एसिंक्रोनस कॉलबैक फ़ंक्शन से मान कैसे वापस लाया जाए? कैसे जावा में एक प्रक्रिया बनाने के लिए अजगर कैसे कार्य करता है? चेतावनी: mysql_connect (): ऐसा कोई फ़ाइल या निर्देशिका (यूनिक्स के माध्यम से कनेक्ट करने का प्रयास: ///tmp/mysql.sock) में कार्यक्रमबद्ध युग्म ब्लूटूथ डिवाइस से जुड़ें हैशसेट और हैशमप के बीच का अंतर? जावा का उपयोग करते हुए DOM ट्री पर HTML फ़ाइल पढ़ना वास्तविक GitHub रिपॉजिटरी से नए अपडेट को फोर्क किए गए गीथहब रिपॉजिटरी में खींचें पीकॉपी / अपाचे के अंदर इंकस्केप पीएनजी को फोंट प्रदान नहीं करता है

मैं कैसे जांच सकता हूँ कि कोई स्क्रॉलबार दिखाई दे रहा है?

क्या overflow:auto को जांचना संभव है overflow:auto एक डिवा का overflow:auto ?

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

एचटीएमएल

 <div id="my_div" style="width: 100px; height:100px; overflow:auto;" class="my_class"> * content </div> 

jQuery

 $('.my_class').live('hover', function (event) { if (event.type == 'mouseenter') { if( ... if scrollbar visible ? ... ) { alert('true'): } else { alert('false'): } } }); 

कभी-कभी सामग्री छोटी होती है (कोई स्क्रॉलबार नहीं) और कभी-कभी लंबा (दृश्यमान स्क्रॉलबार)

वेब के समाधान से एकत्रित समाधान "मैं कैसे जांच सकता हूँ कि कोई स्क्रॉलबार दिखाई दे रहा है?"

इसके लिए एक छोटी सी प्लगइन

 (function($) { $.fn.hasScrollBar = function() { return this.get(0).scrollHeight > this.height(); } })(jQuery); 

इसे इस तरह प्रयोग करें,

 $('#my_div1').hasScrollBar(); // returns true if there's a `vertical` scrollbar, false otherwise.. 

फ़ायरफ़ॉक्स, क्रोम, आईई 6,7,8 पर काम कर परीक्षण किया

लेकिन body टैग चयनकर्ता पर ठीक से काम नहीं कर रहा है

डेमो


संपादित करें

मुझे पता चला कि जब आपके पास क्षैतिज स्क्रॉलबार है जिसके लिए खड़ी स्क्रॉलबार दिखाई देता है, तो यह फ़ंक्शन काम नहीं करता ….

मुझे एक और समाधान मिला … clientHeight उपयोग करें clientHeight

 return this.get(0).scrollHeight > this.get(0).clientHeight; 

हो सकता है कि एक और अधिक सरल समाधान।

 if ($(document).height() > $(window).height()) { // scrollbar } 

मुझे क्या रीगेल ने कहा है की एक छोटी सी चीज को बदलना चाहिए:

 (function($) { $.fn.hasScrollBar = function() { return this.get(0) ? this.get(0).scrollHeight > this.innerHeight() : false; } })(jQuery); 

भीतरी ऊंचाई पर नियंत्रण की ऊंचाई और उसके ऊपर और नीचे पैडिंग

यह @ रेगेल के उत्तर पर फैलता है यह क्षैतिज या ऊर्ध्वाधर स्क्रॉलबार के लिए एक उत्तर वापस करेगा।

 (function($) { $.fn.hasScrollBar = function() { var e = this.get(0); return { vertical: e.scrollHeight > e.clientHeight, horizontal: e.scrollWidth > e.clientWidth }; } })(jQuery); 

उदाहरण:

 element.hasScrollBar() // Returns { vertical: true/false, horizontal: true/false } element.hasScrollBar().vertical // Returns true/false element.hasScrollBar().horizontal // Returns true/false 

आप इसे Element.clientHeight . Element.scrollHeight और Element.clientHeight विशेषताओं के संयोजन के द्वारा कर सकते हैं।

एमडीएन के अनुसार:

Element.scrollHeight केवल-पढ़ने योग्य विशेषता एक तत्व की सामग्री की ऊँचाई का माप है, जिसमें अतिप्रवाह के कारण स्क्रीन पर दिखाई देने वाली सामग्री शामिल नहीं है। स्क्रॉलहाइट वैल्यू न्यूनतम क्लाइंट के बराबर है ऊर्ध्वाधर स्क्रॉलबार का उपयोग किए बिना सभी सामग्री को फिट करने के लिए तत्व की आवश्यकता होती है। इसमें तत्व पैडिंग शामिल है लेकिन इसका मार्जिन नहीं है

तथा:

Element.clientHeight पठन-योग्य प्रॉपर्टी पिक्सेल में एक तत्व की आंतरिक ऊंचाई देता है, पैडिंग सहित, लेकिन क्षैतिज स्क्रॉलबार ऊंचाई, सीमा या मार्जिन नहीं।

ग्राहक की ऊंचाई सीएसएस ऊंचाई + सीएसएस पैडिंग के रूप में गणना की जा सकती है – क्षैतिज स्क्रॉलबार की ऊंचाई (यदि मौजूद है)।

इसलिए, तत्व स्क्रॉलबार प्रदर्शित करेगा यदि स्क्रॉल ऊंचाई क्लाइंट ऊंचाई से अधिक है, तो आपके प्रश्न का उत्तर है:

 function scrollbarVisible(element) { return element.scrollHeight > element.clientHeight; } 

आपको element.scrollHeight की आवश्यकता है इसे $(element).height() तुलना करें। $(element).height()

ऊपर का पहला समाधान केवल आईई में काम करता है ऊपर का दूसरा समाधान एफएफ में ही कार्य करता है

दोनों फ़ंक्शन का यह संयोजन दोनों ब्राउज़रों में काम करता है:

 //Firefox Only!! if ($(document).height() > $(window).height()) { // has scrollbar $("#mtc").addClass("AdjustOverflowWidth"); alert('scrollbar present - Firefox'); } else { $("#mtc").removeClass("AdjustOverflowWidth"); } //Internet Explorer Only!! (function($) { $.fn.hasScrollBar = function() { return this.get(0).scrollHeight > this.innerHeight(); } })(jQuery); if ($('#monitorWidth1').hasScrollBar()) { // has scrollbar $("#mtc").addClass("AdjustOverflowWidth"); alert('scrollbar present - Internet Exploder'); } else { $("#mtc").removeClass("AdjustOverflowWidth"); }​ 
  • एक दस्तावेज़ में लपेटें तैयार
  • मॉनिटर Width1: div जहां ओवरफ़्लो ऑटो पर सेट है
  • एमटीसी: मॉनिटर Width1 के अंदर एक कंटेनर DIV
  • ओवरफ्लोविड्थ समायोजित करें: एक सीएसएस वर्ग #mtc div पर लागू होता है जब स्क्रॉलबार सक्रिय होता है * क्रॉस ब्राउज़र का परीक्षण करने के लिए अलर्ट का उपयोग करें, और उसके बाद अंतिम उत्पादन कोड के लिए टिप्पणी करें।

HTH

मैंने एक नया कस्टम बनाया: jQuery के लिए छद्म चयनकर्ता यह निर्धारित करने के लिए कि कोई आइटम में निम्न सीएसएस गुणों में से एक है:

  1. अतिप्रवाह: [स्क्रॉल | ऑटो]
  2. अतिप्रवाह-एक्स: [स्क्रॉल | ऑटो]
  3. अतिप्रवाह- y: [स्क्रॉल | ऑटो]

मैं किसी अन्य तत्व के सबसे निकटतम स्क्रॉल माता-पिता को ढूंढना चाहता था इसलिए मैंने अतिप्रवाह के निकटतम माता-पिता को खोजने के लिए एक और छोटा jQuery प्लगइन भी लिखा।

यह समाधान शायद सबसे अच्छा प्रदर्शन नहीं करता है, लेकिन यह काम करने के लिए दिखाई देता है। मैंने इसका इस्तेमाल $ .scrollTo प्लगइन के साथ किया था कभी-कभी मुझे यह जानना चाहिए कि एक तत्व दूसरे स्क्रॉल करने योग्य कंटेनर के अंदर है या नहीं। उस स्थिति में मैं माता-पिता स्क्रॉल करने योग्य तत्व को विन्डो बनाम स्क्रॉल करना चाहता हूं।

मुझे शायद यह एक प्लगइन में लपेटा होना चाहिए था और प्लगइन के एक हिस्से के रूप में psuedo selector जोड़ा, साथ ही निकटतम (माता पिता) स्क्रॉल करने योग्य कंटेनर को खोजने के लिए 'निकटतम' विधि को उजागर।

किसी भी …. यहाँ यह है

$ .isScrollable jQuery प्लगइन:

 $.fn.isScrollable = function(){ var elem = $(this); return ( elem.css('overflow') == 'scroll' || elem.css('overflow') == 'auto' || elem.css('overflow-x') == 'scroll' || elem.css('overflow-x') == 'auto' || elem.css('overflow-y') == 'scroll' || elem.css('overflow-y') == 'auto' ); }; 

$ (': स्क्रॉल करने योग्य') jQuery छद्म चयनकर्ता:

 $.expr[":"].scrollable = function(a) { var elem = $(a); return elem.isScrollable(); }; 

$ .scrollableparent () jQuery प्लगइन:

 $.fn.scrollableparent = function(){ return $(this).closest(':scrollable') || $(window); //default to $('html') instead? }; 

कार्यान्वयन बहुत सरल है

 //does a specific element have overflow scroll? var somedivIsScrollable = $(this).isScrollable(); //use :scrollable psuedo selector to find a collection of child scrollable elements var scrollableChildren = $(this).find(':scrollable'); //use $.scrollableparent to find closest scrollable container var scrollableparent = $(this).scrollableparent(); 

अद्यतन: मैंने पाया कि रॉबर्ट कोरिटानिक पहले से ही एक बहुत शक्तिशाली के साथ आया है: स्क्रॉल करने वाले छद्म चयनकर्ता जो स्क्रॉलबल कंटेनर की स्क्रॉल करने योग्य कुल्हाड़ियों और ऊंचाई की पहचान करेगा, अपने $ .scrollintoview () jQuery प्लगइन के भाग के रूप में। scrollintoview प्लगइन

यहां उनका फैंसी छद्म चयनकर्ता (सहारा) है:

  $.extend($.expr[":"], { scrollable: function (element, index, meta, stack) { var direction = converter[typeof (meta[3]) === "string" && meta[3].toLowerCase()] || converter.both; var styles = (document.defaultView && document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(element, null) : element.currentStyle); var overflow = { x: scrollValue[styles.overflowX.toLowerCase()] || false, y: scrollValue[styles.overflowY.toLowerCase()] || false, isRoot: rootrx.test(element.nodeName) }; // check if completely unscrollable (exclude HTML element because it's special) if (!overflow.x && !overflow.y && !overflow.isRoot) { return false; } var size = { height: { scroll: element.scrollHeight, client: element.clientHeight }, width: { scroll: element.scrollWidth, client: element.clientWidth }, // check overflow.x/y because iPad (and possibly other tablets) don't dislay scrollbars scrollableX: function () { return (overflow.x || overflow.isRoot) && this.width.scroll > this.width.client; }, scrollableY: function () { return (overflow.y || overflow.isRoot) && this.height.scroll > this.height.client; } }; return direction.y && size.scrollableY() || direction.x && size.scrollableX(); } }); 

(scrollWidth / Height – clientWidth / Height) एक स्क्रॉलबार की उपस्थिति के लिए एक अच्छा संकेतक है, लेकिन यह आपको कई अवसरों पर एक "झूठी सकारात्मक" उत्तर देगा। अगर आपको सटीक होना चाहिए तो मैं निम्नलिखित फ़ंक्शन का उपयोग करने का सुझाव दूंगा। यदि यह अनुमान लगाया जा रहा है कि तत्व स्क्रॉल करने की कोशिश करने के बजाय – आप इसे स्क्रॉल कर सकते हैं …

 function check(){ alert (isScrollable(document.getElementById('outer'))); } function isScrollable(el){ var y1 = el.scrollTop; el.scrollTop+=1; var y2 = el.scrollTop; el.scrollTop-=1; var y3 = el.scrollTop; el.scrollTop = y1; var x1 = el.scrollLeft; el.scrollTop+=1; var x2 = el.scrollLeft; el.scrollTop-=1; var x3 = el.scrollLeft; el.scrollLeft = x1; return !(y1 === y2 && y2 === y3 && x1 === x2 && x2 === x3); } 
 #outer{ width:100px; height:100px; background-color:pink; overflow:auto; } #inner{ width:150px; height:150px; } 
 <div id="outer"> <div id="inner"> </div> </div> <button onclick="check()">check if scrollable</button> 

ऊपर दिए गए समाधान अधिकांश मामलों में काम करेंगे, लेकिन स्क्रॉलहाइट और ओवरफ्लो की जांच करना कभी-कभी पर्याप्त नहीं होता है और शरीर और एचटीएमएल तत्वों के लिए विफल होता है: https://codepen.io/anon/pen/EvzXZw

यह समाधान जांचता है कि तत्व स्क्रॉल होने योग्य है:

 function isScrollableY (element) { return !!(element.scrollTop || (++element.scrollTop && element.scrollTop--)); } 

नोट: ओवरफ्लो = छिपे वाले तत्वों को भी स्क्रॉल ( अधिक जानकारी ) के रूप में माना जाता है, ताकि आप उस स्थिति के साथ एक शर्त जोड़ सकें, यदि आवश्यक हो:

 function hasVerticalScrollbar (element) { let style = window.getComputedStyle(element); return !!(element.scrollTop || (++element.scrollTop && element.scrollTop--)) && style["overflow"] !== "hidden" && style["overflow-y"] !== "hidden"; } 

स्पष्टीकरण: यह चाल है, कि स्क्रॉल करने और इसे वापस करने का प्रयास ब्राउज़र द्वारा प्रदान नहीं किया जाएगा। सर्वोच्च कार्य निम्न की तरह भी लिखा जा सकता है:

 function isScrollableY (element) { // if scrollTop is not 0 / larger than 0, then the element is scrolled and therefore must be scrollable // -> true if (element.scrollTop === 0) { // if the element is zero it may be scrollable // -> try scrolling about 1 pixel element.scrollTop++; // if the element is zero then scrolling did not succeed and therefore it is not scrollable // -> false if (element.scrollTop === 0) return false; // else the element is scrollable; reset the scrollTop property // -> true element.scrollTop--; } return true; } 

यहाँ मेरा सुधार है: जोड़ा गया parseInt कुछ अजीब कारण के लिए इसके बिना काम नहीं किया।

 // usage: jQuery('#my_div1').hasVerticalScrollBar(); // Credit: http://stackoverflow.com/questions/4814398/how-can-i-check-if-a-scrollbar-is-visible (function($) { $.fn.hasVerticalScrollBar = function() { return this.get(0) ? parseInt( this.get(0).scrollHeight ) > parseInt( this.innerHeight() ) : false; }; })(jQuery); 

यहां पर हर किसी का जवाब अधूरा है, और पहले से ही कृपया SO उत्तर में jquery का उपयोग बंद कर दें। यदि आप jquery पर जानकारी चाहते हैं तो jquery के दस्तावेज़ देखें

यह परीक्षण करने के लिए एक सामान्यीकृत शुद्ध-जावास्क्रिप्ट फ़ंक्शन है या नहीं कि एक तत्व को स्क्रॉलबार एक पूर्ण तरीके से किया गया है या नहीं:

 // dimension - Either 'y' or 'x' // computedStyles - (Optional) Pass in the domNodes computed styles if you already have it (since I hear its somewhat expensive) function hasScrollBars(domNode, dimension, computedStyles) { dimension = dimension.toUpperCase() if(dimension === 'Y') { var length = 'Height' } else { var length = 'Width' } var scrollLength = 'scroll'+length var clientLength = 'client'+length var overflowDimension = 'overflow'+dimension var hasVScroll = domNode[scrollLength] > domNode[clientLength] // Check the overflow and overflowY properties for "auto" and "visible" values var cStyle = computedStyles || getComputedStyle(domNode) return hasVScroll && (cStyle[overflowDimension] == "visible" || cStyle[overflowDimension] == "auto" ) || cStyle[overflowDimension] == "scroll" } 

इवान के जवाब का एक बेहतर संस्करण यहाँ है, जो ओफ़्फ़ो लॉजिक के लिए ठीक से खाता है।

  function element_scrollbars(node) { var element = $(node); var overflow_x = element.css("overflow-x"); var overflow_y = element.css("overflow-y"); var overflow = element.css("overflow"); if (overflow_x == "undefined") overflow_x == ""; if (overflow_y == "undefined") overflow_y == ""; if (overflow == "undefined") overflow == ""; if (overflow_x == "") overflow_x = overflow; if (overflow_y == "") overflow_y = overflow; var scrollbar_vertical = ( (overflow_y == "scroll") || ( ( (overflow_y == "hidden") || (overflow_y == "visible") ) && ( (node.scrollHeight > node.clientHeight) ) ) ); var scrollbar_horizontal = ( (overflow_x == "scroll") || ( ( (overflow_x == "hidden") || (overflow_x == "visible") ) && ( (node.scrollWidth > node.clientWidth) ) ) ); return { vertical: scrollbar_vertical, horizontal: scrollbar_horizontal }; } 

नए संस्करणों में कम से कम क्रोम , एज , फ़ायरफ़ॉक्स और ओपेरा पर काम करता है

JQuery का उपयोग करना …

फ़ुस्टर को ठीक करने के लिए इस फ़ंक्शन को सेटअप करें:

 function fixFooterCaller() { const body = $('body'); const footer = $('body footer'); return function () { // If the scroll bar is visible if ($(document).height() > $(window).height()) { // Reset footer.css('position', 'inherit'); // Erase the padding added in the above code body.css('padding-bottom', '0'); } // If the scrollbar is NOT visible else { // Make it fixed at the bottom footer.css('position', 'fixed'); // And put a padding to the body as the size of the footer // This makes the footer do not cover the content and when // it does, this event fix it body.css('padding-bottom', footer.outerHeight()); } } } 

यह फ़ंक्शन देता है इस तरह से शरीर और पादलेख को एक बार सेट करने के लिए बनाया।

और फिर, यह सेट करें जब दस्तावेज़ तैयार हो।

 $(document).ready(function () { const fixFooter = fixFooterCaller(); // Put in a timeout call instead of just call the fixFooter function // to prevent the page elements needed don't be ready at this time setTimeout(fixFooter, 0); // The function must be called every time the window is resized $(window).resize(fixFooter); }); 

इसे अपने पाद लेख सीएसएस में जोड़ें:

 footer { bottom: 0; }