Kaydırma çubukları ve jquery ile gönderme .width() yöntemi

jQuery'nin .width() yöntemi kaydırma çubuklarını hesaba katmıyor gibi görünüyor. Bu benim için sorunlu, çünkü bazı çocukların genişliğini ebeveynlerinin genişliğine eşitlemek istiyorum. #contentDiv I boyutu istiyorum elemanıdır, bu örnekteKaydırma çubukları ve jquery ile gönderme .width() yöntemi

$('#contentDiv').width($('#containerDiv').width())

ve onun ana eleman #containerDiv genişliğine sahip olması ayarlamak istiyorum: Aşağıdakine benzer jQuery'i kullanılır. Benim sorun benim asıl kodunda

this fiddle. görüldüğü gibi bu, #contentDiv yan keser yani, ben bu yüzden sadece ayar, tüm kaydırılabilir div sığacak gerekiyor jQuery ile boyutlandırma ediyorum kaç elemanı var #contentDiv'un css'si% 100'dür. JQuery'de kaydırma çubuk genişlikleriyle uğraşmanın en iyi yolu nedir?

kaynak

2013-04-12 ckersch

Farklı tarayıcılar kaydırma çubuklarını farklı şekilde uyguladıklarından, bununla ilgili bir sorun var.IE, kaydırma çubuğunu div alanının dışına koyar (aslında standart belgelere göre doğrudur), diğer tarayıcıların tümü de bu alanın içinde kaydırma çubuğuna sahiptir. Sadece bu alanı araştırırken akılda tutulması gereken bir şey. – krillgar

Mümkün yinelenen [jquery - kaydırma çubuğu olmadan ekran genişliği nasıl alınır?] (Http://stackoverflow.com/questions/8339377/jquery-how-to-get-screen-width-without-scrollbar) ('innerWidth kullanın) ')? – fcalderan

Bu, tüm tarayıcılarda tutarlı olmadığı için dağınık bir konudur. Bazıları size bir iç genişlik kazandıracak, bazıları da size kaydırma çubuklarıyla genişlik kazandıracak. Sanırım her tarayıcıya özgü bir çözüm bulmanız gerekebilir. –

bu çözümün etrafında çalışırken buldum iyi çözüm şudur:

http://chris-spittles.co.uk/?p=531

jQuery tüm güçlüdür ve her şey ama bazen yerli JS küçük çizgi piksel mükemmel sayfaları işlemek için ihtiyaç vardır. .. Umarım bu çözümü faydalı bulursunuz!

kaynak

2013-04-12 16:39:51 banjoSas

GÜNCEL: jQuery genişliği bulma yöntemleri

Yok kaydırma çubuğu için hesap. Orijinal örneğimde, .innerWidth(true) LOOKS kullanarak çalışır, ancak yalnızca döndürdüğü ve nesneye neden olduğu için width'un başarısız olmasına neden olur ve iç içerikler kullanılabilir alana sığacak şekilde boyutlandırılır, çünkü örnek çok iyi değildir. Bununla birlikte, içinde bulunan kaydırma çubuğuna sahip boş alanı hesaplamak için bir işlev yazmak mümkündür, bu da içeriği istediğiniz gibi konumlandırmak için kullanılabilir.

Bu işlevi yazmak için, bir div, içinde kaydırma çubuğu bulunan bir div'a eklendiğinde, kullanılabilir tüm genişliği (yani, üst öğenin iç genişliğinin eksi genişliğini) kapladığı gerçeğinden faydalandım kaydırma çubuğunun).

fonksiyonu şuna benzer:

$('#contentDiv').width($('#containerDiv')[0].clientWidth)

için:

$('#contentDiv').width(noScrollWidth($('#containerDiv')));

Working fiddle.

kaynak

2013-04-12 16:42:43 ckersch

İç parametreye bir parametrenin geçirilmesi * elemanın iç genişliğini * ayarlar. "true" geçerli bir argüman değil, ancak yine de, genişlik yerine öğeyi döndüreceği anlamına gelir. –

İyi yakalama, 'innerWidth (true)' kullandığımda örneğimin sessizce başarısız olduğunu gösteriyor. Bunun yerine farklı bir çözüm ekledim. İşe yarıyorsa bana haber ver! – ckersch

Düzenlediğiniz için teşekkürler - Reddetme notumu kaldırdım. Çözmeyi denediğim problem, kaydırma çubuğu hariç bir eleman genişliği bulmaktı ve '$ (myElementSpec) [0] .clientWidth' en iyi çözüm gibi görünüyordu. Bu cevap bana ulaşmamı sağladı: http://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-wardswards –

bu deneyin:

function noScrollWidth(div){ 
    var measureDiv = $('<div id="measureDiv">'); 

    div.append(measureDiv); 

    var width = measureDiv.outerWidth(); 

    measureDiv.remove(); 

    return width 
};

Sonra boyuta benim içerik div bunu kullanın mor Bu çözüm hakkında bilgi, bkz. this StackOverflow answer.

kaynak

2014-10-25 00:16:01

Denediğim başka bir yaklaşım da 'box-sizing property öğesinin' kenarlık kutusu'na ayarlanması ve içeriğinizin% 100'üne ayarlanıp ayarlanmadığına bakıp istediğiniz gibi çalışır.

Artık daha az sayıda proje, eski eski tarayıcılar hakkında endişeleniyor, 'sınır-kutusu', işleri daha kolay hale getirebilir. Birden fazla platformda birden fazla tarayıcıyı test ettiğinizden emin olun, çünkü hepsinin kaydırma çubuklarını aynı şekilde ele aldığından emin değilim.

kaynak

2014-10-25 00:18:06

Kaydırma çubukları ve jquery ile gönderme .width() yöntemi

cevap

İlgili konular