स्क्रॉलबार

Question

के बिना jquery में किसी तत्व की आंतरिकविड्थ कैसे प्राप्त करें इसमें एक स्क्रॉल है जिसमें एक स्क्रॉलबार है (उदा। बी/सी ओवरफ्लो: ऑटो), मैं तत्व के सटीक आंतरिकविड्थ को कैसे प्राप्त करूं? मेरे उदाहरण में: http://jsfiddle.net/forgetcolor/2J7NJ/ चौड़ाई और भीतरी चौड़ाई एक ही चौड़ाई की रिपोर्ट करें। संख्या मैं होना चाहिए कम से कम 100

एचटीएमएल हैं:

<div id='box1'> 
<div id='box2'> 
</div> 
</div> 
<p id="w"></p> 
<p id="iw"></p>​ 

सीएसएस:

#box1 { 
    width:100px; 
    height:100px; 
    overflow:auto; 
} 

#box2 { 
    width:200px; 
    height:200px; 
    background-color:#aaa; 
} 

जावास्क्रिप्ट:

$('#w').text("width is: "+$('#box1').width()); 
$('#iw').text("inner width is: "+$('#box1').innerWidth());​ 

अद्यतन:

मैं इस की जरूरत है बॉक्स 2 div con जब काम करने के लिए एक बड़ी छवि tains (इस प्रकार, लोड करने के लिए एक सेकंड लेता है)। यहां एक उदाहरण दिया गया है, नीचे दिए गए समाधानों में से एक को एकीकृत करना (Lukx '), जो काम नहीं करता है: http://jsfiddle.net/forgetcolor/rZSCg/1/। चौड़ाई की गणना करने से पहले छवि को लोड करने के लिए प्रतीक्षा करने के लिए कोई विचार कैसे प्राप्त करें?

Answer 1

#box1 में एक नया DIV डालने से -कॉन्टेनर, यह डीआईवी उपलब्ध चौड़ाई प्राप्त करेगा - और इसकी चौड़ाई पढ़ने से एक मान आता है जो सही प्रतीत होता है। http://jsfiddle.net/xc9xQ/2/

तो एक समारोह के साथ इस मूल्य प्राप्त करने के:

HTML और सीएसएस दोनों अपरिवर्तित

जे एस हो जाता है

var helperDiv = $('<div />'); 
$('#box1').append(helperDiv); 

$('#iw').text("inner width is: " + helperDiv.width()); 
helperDiv.remove();​​​​​​​​​​​​​​​​​​​​​​​​​​​ // because we dont need it anymore, do we? 

मैं भी अपने फिडल काँटेदार को देखने के लिए मैं क्या किया है रहने के

function widthWithoutScrollbar(selector) { 
    var tempDiv = $("<div/>"); 
    $(selector).append(tempDiv); 
    var elemwidth = tempDiv.width(); 
    tempDiv.remove(); 
    return elemwidth; 
}; 

//Example 
console.log($('#page').width()); // 1280 
console.log(widthWithoutScrollbar('#page')); // 1265 

Answer 2

आप अपने मूल div कॉपी करके किसी अन्य div कर सकते हैं, तो चौड़ाई आदि जैसे कुछ मिलता है:

var saveDiv = $('<div />').html($('#box2').html()); 

saveDiv.innerWidth आप दे देंगे 0

Answer 3

यदि सादा जावास्क्रिप्ट में कोई समाधान ठीक है तो आप इसका उपयोग कर सकते हैं तकनीक डेविड वॉल्श यहाँ द्वारा वर्णित: http://davidwalsh.name/detect-scrollbar-width

मैं अपने बेला काँटेदार और इसे लागू किया: http://jsfiddle.net/jnaO/z9btp/

लेकिन फिर से, इस का उपयोग नहीं कर रहा है jQuery, केवल जावास्क्रिप्ट।

Answer 4

मुझे यकीन नहीं है कि आप जो खोज रहे हैं, लेकिन मुझे विश्वास है कि यह आईडी बॉक्स 1 के साथ div के scrollWidth या clientWidth है।

दोनों जावास्क्रिप्ट गुण हैं और उन्हें पुनर्प्राप्त करने के लिए jQuery की आवश्यकता नहीं है लेकिन निम्नलिखित $('#box1')[0] के साथ jQuery में पकड़ा जा सकता है। यह सब पहली बार लौटाता है (और यदि आप केवल आईडी का उपयोग कर रहे हैं) jQuery चयनकर्ता से डीओएम तत्व।

यदि आप स्क्रॉल बार के बावजूद बॉक्स 1 की सामग्री की चौड़ाई को ढूंढ रहे हैं तो शायद आप $('#box1')[0].scrollWidth ढूंढ रहे हैं। यदि आप चौड़ाई की तलाश में हैं और बॉक्स 1 के भीतर प्रदर्शित करते हैं, तो आप $('#box1')[0].clientWidth खोज रहे हैं।

मैंने आपकी पहेली को फोर्क किया ताकि आप दोनों कार्रवाई में देख सकें। http://jsfiddle.net/arosen/xp9hD/