StackOverflow üzerinde birkaç soru offsetWidth/clientWidth/scrollWidth (Yükseklik sırasıyla) ile ilgili, fakat hiçbiri bu değerleri ne kapsamlı bir açıklama vermek.

Ayrıca, web üzerinde çeşitli kaynaklardan kafa karıştırıcı ya da yanlış bilgi veriyorlar.

Bazı görsel ipuçları da dahil olmak üzere tam bir açıklama yapabilir misiniz? Ayrıca, bu değerler nasıl kaydırma çubuğu genişlikleri hesaplamak için kullanılabilir mi?

CSS kutu modeli özellikle içeriğini kaydırma gelince oldukça karmaşık bir işlemdir. Tarayıcı CSS değerleri kutuları çizmek için kullanır, ancak tüm boyutları JS kullanarak belirlenmesi eğer sadece CSS eğer düz ileri değil.

Her öğe size kolaylık sağlamak için Altı DOM özellikleri var: *, offsetHeight, , *, *6clientWidth*5offsetWidth ve scrollHeight. Bu salt-okunur öznitelikleri geçerli görsel düzeni temsil eden ve onların hepsitamsayılar(böylece muhtemelen yuvarlama hataları tabi).

Hadi bunları ayrıntılı olarak geçmesi:

• offsetWidth, offsetHeight: visual kutusunun boyutunu tüm sınırları da dahil olmak üzere. Eğer öğe display: block varsa*/height *10 ve doldurma ve sınırları ekleyerek hesaplanabilir
• clientWidth, clientHeight: kutu içeriği, sınırları ya da kaydırma çubukları da dahil olmak üzere görsel kısım , ama doldurma içerir . Doğrudan CSS hesaplanabilir değil, sistemin kaydırma çubuğu boyutuna bağlıdır.
• scrollWidth, scrollHeight: kutunun içeriği, şu anda kaydırma alanı dışında gizli kalan yerleri de dahil olmak üzere tüm boyutu. Doğrudan CSS hesaplanabilir değil, içeriğine bağlıdır.

Deneyin: jsFiddle

clientWidth dikkate kaydırma çubuğu genişliğini alır beri, bu formül üzerinden kaydırma çubuğu genişliğini hesaplamak için kullanabiliriz

scrollbarWidth = offsetWidth - clientWidth - getComputedStyle().borderLeftWidth - getComputedStyle().borderRightWidth

Ne yazık ki, gerçek boyutlarda seviyeleri 1'den zoom ile kesirli olabilir offsetWidth clientWidth her zaman tamsayılar olduğundan yuvarlama hataları,, alabilirsiniz.

Bu unutmayın

scrollbarWidth = getComputedStyle().width   getComputedStyle().paddingLeft   getComputedStyle().paddingRight - clientWidth

yokdeğilKrom döner 22* *kaydırma çubuğu zaten çıkarılır ile beri güvenilir Chrome çalışıyorlar. (Ayrıca, Chrome işler diğer tarayıcılar yok iken kaydırma içeriği alt paddingBottom,)