[javascript] 요소의 내용이 넘치지 않는가?

요소가 오버플로되었는지 감지하는 가장 쉬운 방법은 무엇입니까?

사용 사례는 특정 콘텐츠 상자의 높이를 300px로 제한하고 싶습니다. 내부 내용이 그보다 크면 오버플로로 잘라냅니다. 그러나 오버플로가 발생하면 ‘더보기’버튼을 표시하고 싶지만 그렇지 않으면 해당 버튼을 표시하고 싶지 않습니다.

오버플로를 감지하는 쉬운 방법이 있습니까, 아니면 더 좋은 방법이 있습니까?

답변

더 많은 콘텐츠에 대한 식별자 만 표시하려면 순수한 CSS를 사용하여이 작업을 수행 할 수 있습니다. 나는 이것을 위해 순수한 스크롤 그림자를 사용합니다. 트릭은의 사용입니다 background-attachment: local;. 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;
}

<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>

스 니펫 확장

찾을 수있는 코드와 예제 http://dabblet.com/gist/2462915에서

http://lea.verou.me/2012/04/background-attachment-local/ 에서 설명을 찾을 수 있습니다 .

답변

요소는 수직, 수평 또는 둘 다 오버플로 될 수 있습니다. DOM 요소가 오버플로 된 경우이 함수는 부울 값을 반환합니다.

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

코드 스 니펫 표시

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

var els = document.getElementsByClassName('demos');
for (var i = 0; i < els.length; i++) {
  var el = els[i];
  el.style.borderColor = (isOverflown(el) ? 'red' : 'green');
  console.log("Element #" + i + " is " + (isOverflown(el) ? '' : 'not ') + "overflown.");
}

.demos {
  white-space: nowrap;
  overflow: hidden;
  width: 120px;
  border: 3px solid black;
}

<div class='demos'>This is some text inside the div which we are testing</div>
<div class='demos'>This is text.</div>

스 니펫 확장

ES6 예 :

const isOverflown = ({ clientWidth, clientHeight, scrollWidth, scrollHeight }) => {
    return scrollHeight > clientHeight || scrollWidth > clientWidth;
}

답변

비교 element.scrollHeight를하는 element.clientHeight작업을해야한다.

아래는 Element.scrollHeight 및 Element.clientHeight를 설명하는 MDN의 이미지입니다.

답변

위의 답변 (예 : 오버플로 숨김 및 높이 사용)을 보여주는 멀티 파트 코드 펜을 만들었지 만 오버플로 된 항목을 확장 / 축소하는 방법

예 1 : https://codepen.io/Kagerjay/pen/rraKLB (실제 간단한 예, 자바 스크립트 없음, 오버플로 된 항목 잘라 내기)

예 2 : https://codepen.io/Kagerjay/pen/LBErJL (오버플로 된 항목에서 단일 이벤트 핸들러가 더 많이 표시 / 보이지 않음)

예 3 : https://codepen.io/Kagerjay/pen/MBYBoJ (많은 쇼에 멀티 이벤트 핸들러는 더 / 오버 플로우 항목에 덜 표시)

아래 예제 3 도 첨부 했습니다. Jade / Pug를 사용하므로 다소 장황 할 수 있습니다. 이해하기 쉬운 코드 펜을 확인하는 것이 좋습니다.

// 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);
  }
})

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;
}

<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>

스 니펫 확장

답변

http://jsfiddle.net/Skooljester/jWRRA/1/ 과 같이 작동합니까? 내용의 높이를 확인하고 컨테이너의 높이와 비교합니다. 이 값보다 크면 “더보기”버튼을 추가하는 코드를 넣을 수 있습니다.

업데이트 : 컨테이너 상단에 “더보기”버튼을 만드는 코드가 추가되었습니다.

답변

jQuery를 사용하는 경우 속임수를 사용하여 외부 div를 사용 overflow: hidden하고 내부 div를 내용으로 만듭니다. 그런 다음 .height()함수를 사용 하여 내부 div의 높이가 외부 div의 높이보다 큰지 확인하십시오. 나는 그것이 효과가 있을지 확신하지 못하지만 시도해보십시오.

답변

js를 사용하여 자녀 offsetHeight가 부모보다 더 많은지 확인하십시오 . 그렇다면 부모가 scroll/hidden/auto원하는대로 오버플 display:block로하고 더 많은 구역에서 오버플 로하십시오.