scrollbar – devfrontend.info

[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

24/11/2020 / admin

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.

var computedStyle = getComputedStyle(element);

elementHeight = element.clientHeight;  // height with padding
elementWidth = element.clientWidth;   // width with padding

elementHeight -= parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom);
elementWidth -= parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);

var computedStyle = getComputedStyle(element);

elementHeight = element.clientHeight; // height with padding

elementWidth = element.clientWidth; // width with padding

elementHeight -= parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom);

elementWidth -= parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);

Dans la pratique:

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

    let $leftColumn = document.querySelector('.page-leftColumn'),
        computedStyle = getComputedStyle($leftColumn),
        leftColumnHeight = $leftColumn.clientHeight - (parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom));
    // console.log(leftColumnHeight);

let $leftColumn = document.querySelector('.page-leftColumn'),

computedStyle = getComputedStyle($leftColumn),

leftColumnHeight = $leftColumn.clientHeight - (parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom));

// console.log(leftColumnHeight);

Tenir compte de la scrollbar

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

var cs = getComputedStyle(element);

var paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
var paddingY = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);

var borderX = parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth);
var borderY = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);

// Element width and height minus padding and border
elementWidth = element.offsetWidth - paddingX - borderX;
elementHeight = element.offsetHeight - paddingY - borderY;

var cs = getComputedStyle(element);

var paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);

var paddingY = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);

var borderX = parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth);

var borderY = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);

// Element width and height minus padding and border

elementWidth = element.offsetWidth - paddingX - borderX;

elementHeight = element.offsetHeight - paddingY - borderY;

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

14/01/2019 / admin

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:

[].forEach.call($$("*"), function(a) {
  a.style.outline =
    "1px solid #" + (~~(Math.random() * (1 << 24))).toString(16);
});

[].forEach.call($$("*"), function(a) {

a.style.outline =

"1px solid #" + (~~(Math.random() * (1 << 24))).toString(16);

});

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

11/04/2018 / admin

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.

::-webkit-scrollbar { 
    display: none; 
}

::-webkit-scrollbar {

display: none;

}

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.

#parent{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
}

#parent{

height: 100%;

width: 100%;

overflow: hidden;

}

#child{

width: 100%;

height: 100%;

overflow-y: scroll;

padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */

}

ou avec position: absolute;

#parent{
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
}

#child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
    overflow-y: scroll;
}

#parent{

height: 100%;

width: 100%;

overflow: hidden;

position: relative;

}

#child{

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: -17px; /* Increase/Decrease this value for cross-browser compatibility */

overflow-y: scroll;

}

Cas d’une iFrame

body.pageLabel--liste-de-naissance {
  .no-space {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  iframe.js-rbschange-iframe {
    width: 100% !important;
    overflow-y: scroll;
    @media (min-width: @screen-md-min) {
      padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    }
  }
}
#tplOneColumn {
  // un <div> englobant DANS l'iFrame
  overflow: hidden;
}

body.pageLabel--liste-de-naissance {

.no-space {

height: 100%;

width: 100%;

overflow: hidden;

}

iframe.js-rbschange-iframe {

width: 100% !important;

overflow-y: scroll;

@media (min-width: @screen-md-min) {

padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */

}

#tplOneColumn {

// un <div> englobant DANS l'iFrame

overflow: hidden;

}

Articles récents

Catégories

Archives

Méta

É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

Dégageage du padding avec `getComputedStyle`

Dans la pratique:

Tenir compte de la scrollbar

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

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

Sous Chrome:

Solutions universelles

Cas d’une iFrame

Dégageage du padding avec getComputedStyle

Dans la pratique:

Tenir compte de la scrollbar

Sous Chrome:

Solutions universelles

Cas d’une iFrame

Dégageage du padding avec `getComputedStyle`