Vérifier si un élément de contenu est-il dépassé?

Quelle est la meilleure façon de détecter si un élément a été débordé?

Mon cas d'utilisation, je veux limiter un certain contenu de la boîte pour avoir une hauteur de 300px. Si le contenu interne est plus grand que cela, je le couper avec un dépassement de capacité. Mais s'il est débordé, je veux montrer un bouton "plus", mais sinon, je ne veux pas afficher le bouton.

Est-il un moyen facile de détecter un dépassement de capacité ou est-il une meilleure méthode?

InformationsquelleAutor Harry | 2012-02-17
  1. 61

    Si vous souhaitez afficher uniquement un identifiant pour plus de contenu, alors vous pouvez le faire avec de la pure CSS. J'utilise pur défilement des ombres pour cela. Le truc, c'est l'utilisation de background-attachment: local;. Votre css ressemble à ceci:

    CSS:

    .scrollbox {
  overflow: auto;
  width: 200px;
  max-height: 200px;
  margin: 50px auto;

  background:
    /* Shadow covers */
    linear-gradient(white 30%, rgba(255,255,255,0)),
    linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
    
    /* Shadows */
    radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)),
    radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
  background:
    /* Shadow covers */
    linear-gradient(white 30%, rgba(255,255,255,0)),
    linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
    
    /* Shadows */
    radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
  background-repeat: no-repeat;
  background-color: white;
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  
  /* Opera doesn't support this in the shorthand */
  background-attachment: local, local, scroll, scroll;
}

    HTML:

    <div class="scrollbox">
  <ul>
    <li>Not enough content to scroll</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>


<div class="scrollbox">
  <ul>
    <li>Ah! Scroll below!</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>The end!</li>
    <li>No shadow there.</li>
  </ul>
</div>

    Le code et l'exemple que vous pouvez trouver sur http://dabblet.com/gist/2462915

    Et une explication vous pouvez trouver ici: http://lea.verou.me/2012/04/background-attachment-local/.

    • génial plaine CSS solution
    • ce n'est pas une réponse à la question
    • C'est l'un des choses les plus folles que j'ai vu réalisés avec du css!
    • Bonne idée, mais dans votre exemple, l'arrière-plan (l'ombre) serait derrière le texte!
    • Le grand truc, cependant dans google Chrome, il ne montre que des ombres statiques sur le fond, il ne disparaît pas et la partie supérieure de l'ombre ne se montre jamais
    • Manuel Ferreiro, Comment est ce pas une réponse à la question? La question était "Est-il un moyen facile de détecter un dépassement de capacité OU EST-IL UNE MEILLEURE MÉTHODE?" RWAM a montré une meilleure approche.
    • OMI facile, astuce sympa.

    InformationsquelleAutor RWAM
  2. 174

    L'élément peut être survolé verticalement, horizontalement ou les deux. Cette fonction va vous renvoyer une valeur booléenne si l'élément du DOM est survolé:

    function isOverflown(element) {
    return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}

    ES6 exemple:

    const isOverflown = ({ clientWidth, clientHeight, scrollWidth, scrollHeight }) => {
    return scrollHeight > clientHeight || scrollWidth > clientWidth;
}
    • Excellente solution! Voici un jQuery variante (pour être utilisé avec $("#element").overflown()): $.fn.overflown=function(){var e=this[0];return e.scrollHeight>e.clientHeight||e.scrollWidth>e.clientWidth;}
    • salut , je suis en utilisant ionic2 et essaie de faire la même chose... mais la fonction renvoie vrai... toujours est-il une façon différente de faire les choses dans angulaire 2
    • cette fonction est de la pure API DOM, je n'ai pas d'expérience avec l'Ionique/Anguleuses, je suppose que vous devriez obtenir l'original de l'Élément du DOM et de l'utilisation de cette fonction
    • Uniquement pour Firefox: element.addEventListener ("overflow", () => log( "overflow" ), false); Référence: overflow événement
    InformationsquelleAutor micnic
  3. 13

    Comparant élément .scrollHeight à élément .clientHeight devrait faire la tâche.

    Ci-dessous sont les images de MDN expliquant Élément.scrollHeight et l'Élément.clientHeight.

    Vérifier si un élément de contenu est-il dépassé?

    Vérifier si un élément de contenu est-il dépassé?

    • Ouais, mais selon quirksmode cela fonctionne pour la plupart - et est beaucoup plus simple que les autres posté des solutions.
    • Il est pris en charge dans tous les navigateurs actuels (bureau au moins), de sorte qu'il n'a pas d'importance qu'il est formellement non standard.
    • Ici, ces propriétés ont toujours les mêmes valeurs.
    InformationsquelleAutor Bergi
  4. 5

    J'ai fait un multipart codepen démontrant les réponses ci-dessus ( par ex. à l'aide de dépassement de caché et de la hauteur), mais aussi comment vous pourriez développer /réduire débordé éléments

    Exemple 1: https://codepen.io/Kagerjay/pen/rraKLB ( Real simple exemple, pas de javascript, juste pour le clip débordé éléments)

    Exemple 2: https://codepen.io/Kagerjay/pen/LBErJL (un Seul gestionnaire d'événement afficher plus /showless sur débordé éléments)

    Exemple 3: https://codepen.io/Kagerjay/pen/MBYBoJ (Multi gestionnaire d'événement sur de nombreux montrer plus montrer moins sur débordé éléments)

    J'ai attaché à l'exemple 3 ci-dessous ainsi, j'utilise Jade/Carlin, de sorte qu'il pourrait être un peu verbeux. Je suggère de vérifier la codepens j'ai fait sa plus simple à saisir.

    JS:

    //Overflow boolean checker
function isOverflown(element){
  return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}

//Jquery Toggle Text Plugin
$.fn.toggleText = function(t1, t2){
  if (this.text() == t1) this.text(t2);
  else                   this.text(t1);
  return this;
};

//Toggle Overflow
function toggleOverflow(e){
  e.target.parentElement.classList.toggle("grid-parent--showall");
  $(e.target).toggleText("Show More", "Show LESS");
}

//Where stuff happens
var parents = document.querySelectorAll(".grid-parent");

parents.forEach(parent => {
  if(isOverflown(parent)){
    parent.lastElementChild.classList.add("btn-show");
    parent.lastElementChild.addEventListener('click', toggleOverflow);
  }
})

    CSS:

    body {
  background-color: #EEF0ED;
  margin-bottom: 300px;
}

.grid-parent {
  margin: 20px;
  width: 250px;
  background-color: lightgrey;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  max-height: 100px;
  position: relative;
}
.grid-parent--showall {
  max-height: none;
}

.grid-item {
  background-color: blue;
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  border: 1px solid red;
}
.grid-item:nth-of-type(even) {
  background-color: lightblue;
}

.btn-expand {
  display: none;
  z-index: 3;
  position: absolute;
  right: 0px;
  bottom: 0px;
  padding: 3px;
  background-color: red;
  color: white;
}

.btn-show {
  display: block;
}

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<p>Any grid-parent over 10 child items has a "SHOW MORE" button to expand</p>
<p>Click "SHOW MORE" to see the results</p>
</section>
<radio></radio>
<div class="wrapper">
<h3>5 child elements</h3>
<div class="grid-parent">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="btn-expand">Show More</div>
</div>
<h3>8 child elements</h3>
<div class="grid-parent">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="btn-expand">Show More</div>
</div>
<h3>10 child elements</h3>
<div class="grid-parent">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="btn-expand">Show More</div>
</div>
<h3>13 child elements</h3>
<div class="grid-parent">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="btn-expand">Show More</div>
</div>
<h3>16 child elements</h3>
<div class="grid-parent">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="btn-expand">Show More</div>
</div>
<h3>19 child elements</h3>
<div class="grid-parent">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="btn-expand">Show More</div>
</div>
</div>

    • Un+ pour l'effort. Merci!
    InformationsquelleAutor Vincent Tang
  5. 4

    Serait quelque chose comme cela: http://jsfiddle.net/Skooljester/jWRRA/1/ travail? Il vérifie juste la hauteur du contenu et la compare à la hauteur du conteneur. Si il est plus grand que vous pouvez mettre dans le code pour ajouter un "plus" sur le bouton.

    Mise à jour: Ajouté le code pour créer un "Plus" situé en haut du conteneur.

    InformationsquelleAutor ayyp
  6. 3

    Si vous utilisez jQuery, vous pouvez essayer un truc: faire des div extérieure avec overflow: hiddenet l'intérieur de la div avec le contenu. Ensuite, utilisez .height() fonction pour vérifier si la hauteur de l'intérieur de la div est plus grande que la hauteur de la div extérieure. Je ne suis pas sûr que cela fonctionne, mais lui donner un essai.

    InformationsquelleAutor TMS
  7. 1

    utiliser js pour vérifier si l'enfant offsetHeight est plus que les parents.. si c'est le cas,prenez les parents de débordement scroll/hidden/auto selon ce que vous voulez et aussi display:block sur les plus div..

    InformationsquelleAutor Vivek Chandra
  8. 1

    Une autre question que vous devriez considérer est un JS indisponibilité. Pensez progressive de l'enchantement ou de la dégradation gracieuse. Je dirais:

    • ajoutant que "plus de bouton" par défaut
    • l'ajout de dépassement des règles par défaut
    • cacher le bouton et, si nécessaire, CSS modifications en JS après la comparaison de l'élément.scrollHeight à l'élément.clientHeight
    InformationsquelleAutor MFix
  9. 1

    Ici est un violon pour déterminer si un élément a été débordé à l'aide d'une enveloppe de div avec overflow:hidden et JQuery hauteur() pour mesurer la différence entre l'enveloppe et l'intérieur du contenu de la div.

    outers.each(function () {
var inner_h = $(this).find('.inner').height();
console.log(inner_h);
var outer_h = $(this).height();
console.log(outer_h);
var overflowed = (inner_h > outer_h) ? true : false;
console.log("overflowed = ", overflowed);
});

    Source: Cadres & Extensions sur jsfiddle.net

    InformationsquelleAutor user1295799
  10. 1

    C'est le jQuery solution qui a fonctionné pour moi. clientWidth etc. n'a pas fonctionné.

    function is_overflowing(element, extra_width) {
return element.position().left + element.width() + extra_width > element.parent().width();
}

    Si cela ne fonctionne pas, s'assurer que les éléments de parent a la largeur désirée (personnellement, j'ai eu à utiliser parent().parent()). position est par rapport à la mère. J'ai aussi inclus extra_width parce que mes éléments ("tags") contiennent des images qui prennent peu de temps à charger, mais lors de l'appel de la fonction qu'ils ont une largeur égale à zéro, gâchant le calcul. Pour contourner cela, j'utilise la suite de l'appel de code:

    var extra_width = 0;
$(".tag:visible").each(function() {
if (!$(this).find("img:visible").width()) {
//tag image might not be visible at this point,
//so we add its future width to the overflow calculation
//the goal is to hide tags that do not fit one line
extra_width += 28;
}
if (is_overflowing($(this), extra_width)) {
$(this).hide();
}
});

    Espère que cette aide.

    InformationsquelleAutor Dennis Golomazov
  11. 0

    Vous pouvez vérifier les limites par rapport à l'offset parent.

    //Position of left edge relative to frame left courtesy
//http://www.quirksmode.org/js/findpos.html
function absleft(el) {
var x = 0;
for (; el; el = el.offsetParent) {
x += el.offsetLeft;
}
return x;
}
//Position of top edge relative to top of frame.
function abstop(el) {
var y = 0;
for (; el; el = el.offsetParent) {
y += el.offsetTop;
}
return y;
}
//True iff el's bounding rectangle includes a non-zero area
//the container's bounding rectangle.
function overflows(el, opt_container) {
var cont = opt_container || el.offsetParent;
var left = absleft(el), right = left + el.offsetWidth,
top = abstop(el), bottom = top + el.offsetHeight;
var cleft = absleft(cont), cright = cleft + cont.offsetWidth,
ctop = abstop(cont), cbottom = ctop + cont.offsetHeight;
return left < cleft || top < ctop
|| right > cright || bottom > cbottom;
}

    Si vous passez ce un élément qu'il vous dira si ses limites sont entièrement à l'intérieur d'un conteneur, et sera, par défaut, l'élément le décalage d'un parent si aucune condition explicite de conteneur est fourni. Il utilise

    InformationsquelleAutor Mike Samuel
  12. 0
    setTimeout(function(){
isOverflowed(element)           
},500)
function isOverflowed(element){
return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}

    Cela a fonctionné pour moi. Merci.

    • Comment est-ce différent de micnic de réponse?
    InformationsquelleAutor Krunal
  13. 0

    Le jquery alternative la réponse est d'utiliser la touche [0] pour accéder à la crue de l'élément comme ceci:

    if ($('#elem')[0].scrollHeight > $('#elem')[0].clientHeight){
    InformationsquelleAutor Antony