javascript - Sjekk med jquery om div har overløpende elementer

Jeg har en div med en fast høyde og overflow:hidden;

Jeg vil sjekke med jQuery om div-en har elementer som stikker utenfor den faste høyden på div-en. Hvordan kan jeg gjøre dette?

Svar #1

Du trenger faktisk ikke jQuery for å sjekke om det skjer en overløp eller ikke. Ved å bruke element.offsetHeight, element.offsetWidth, element.scrollHeight og element.scrollWidth kan du avgjøre om elementet ditt har innhold som er større enn dets størrelse:

if (element.offsetHeight < element.scrollHeight ||
    element.offsetWidth < element.scrollWidth) {
    // your element have overflow
} else {
    // your element doesn't have overflow
}

Se eksempel i aksjon: Fiddle

Men hvis du vil vite hvilket element inni elementet ditt som er synlig eller ikke, må du gjøre flere beregninger. Det finnes tre tilstander for et barnelement når det gjelder synlighet:

Hvis du vil telle delvis synlige elementer, vil det være skriptet du trenger:

var invisibleItems = [];
for(var i=0; i<element.childElementCount; i++){
  if (element.children[i].offsetTop + element.children[i].offsetHeight >
      element.offsetTop + element.offsetHeight ||
      element.children[i].offsetLeft + element.children[i].offsetWidth >
      element.offsetLeft + element.offsetWidth ){

        invisibleItems.push(element.children[i]);
    }

}

Og hvis du ikke vil telle halv-synlige, kan du beregne med en liten forskjell.

Svar #2

Jeg hadde det samme spørsmålet som OP, og ingen av de svarene passet mine behov. Jeg trengte en enkel betingelse, for et enkelt behov.

Her er mitt svar:

if ($("#myoverflowingelement").prop('scrollWidth') > $("#myoverflowingelement").width() ) {
  alert("this element is overflowing !!");
}
else {
 alert("this element is not overflowing!!");
}

Du kan også endre scrollWidth til scrollHeight hvis du trenger å teste begge tilfeller.

Relaterte artikler