Étiquette : scrollbar

[Javascript] Récupérer la largeur ou la hauteur d’un élément sans les padding, margin, bordure et scrollbar associés avec clientHeight, offsetHeight et parseFloat

Sources:

Dégageage du padding avec getComputedStyle

Faire un console.log(computedStyle); vous donnera une liste de toutes les données récupérées via la méthode getComputedStyle et que vous pourrez exploiter ensuite.

Dans la pratique:

Je veux récupérer la hauteur du contenu de l’élément de DOM .page-leftColumn sans le padding:

Tenir compte de la scrollbar

Voir aussi ici pour ce bout de code modifié pour tenir compte de la scrollbar:

[CSS] Trouver l’élément trop large qui fait apparaître une scroll barre horizontale dans votre page

Source: 108 byte CSS Layout Debugger.

Certains éléments vont causer l’apparition d’une barre de scroll horizontal dans votre navigateur à cause de leur largeur. La façon la plus simple de trouver la cause à ce problème est d’utiliser l’outline CSS. Voici un script par Addy Osmani qui permet d' »outliner » chaque élément d’une page.

Copier/Coller le code ci dessous dans la console de debug de votre navigateur:

[CSS] Masquer la scrollbar tout en permettant encore le scroll

Source: Hide scroll bar, but while still being able to scroll sur Stack Overflow

Sous Chrome:

…mais ne fonctionne pas sous Firefox ou Internet Explorer.

Solutions universelles

Voir aussi plus bas dans le cas d’une iFrame. Voir le billet original sur Stack Overflow pour des liens vers des jsFiddle d’example.

ou avec position: absolute;

Cas d’une iFrame