요소의 내용이 오버플로우인지 확인하시겠습니까?

요소의 내용이 오버플로우인지 확인하시겠습니까?

요소가 넘쳤는지 여부를 가장 쉽게 감지할 수 있는 방법은 무엇입니까?

사용 예로는 특정 콘텐츠 박스의 높이를 300px로 제한하고 싶습니다.내용물이 그 이상이면 넘쳐서 끊어버려요.그러나 넘치면 '더 보기' 버튼을 표시하고 싶지만, 그렇지 않으면 해당 버튼을 표시하고 싶지 않습니다.

오버플로를 쉽게 검출할 수 있는 방법이 있나요, 아니면 더 나은 방법이 있나요?

요소는 수직, 수평 또는 둘 다 오버플로우 될 수 있습니다.이 함수는 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;
}

하여 이를 할 수 .저는 순수 스크롤 섀도를 사용합니다.비결은 을 사용하는 것이다.background-attachment: local;는 이렇게 되어 css understand.

.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/ 를 참조해 주세요.

와 비교하여 작업을 수행해야 합니다.

다음은 MDN에서 Element.scrollHeight와 Element.client에 대해 설명한 이미지입니다.높이.

위의 답변(예를 들어 오버플로우 숨김 및 높이 사용)과 오버플로우 아이템을 확장/축소하는 방법을 나타내는 멀티파트 코데펜을 만들었습니다.

예 1: https://codepen.io/Kagerjay/pen/rraKLB (진짜 간단한 예시로 javascript는 사용하지 않습니다.오버플로우된 아이템을 클리핑합니다.)

예 2: https://codepen.io/Kagerjay/pen/LBErJL (1개의 이벤트핸들러로 오버플로우 아이템이 더 많이 표시되거나 표시되지 않음)

예 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()Inner div의 높이가 Outer div의 높이보다 큰지 확인하는 기능.잘 될지는 모르겠지만 한번 시도해 보세요.

간격띄우기 부모에 상대적인 경계를 확인할 수 있습니다.

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

이 요소를 전달하면 해당 경계가 완전히 컨테이너 내부에 있는지 여부를 알려주고 명시적 컨테이너가 제공되지 않으면 요소의 오프셋 상위 항목으로 기본 설정됩니다.사용하다

캡슐화를 위해 요소를 확장했습니다.비꼬는 대답부터.

/*
 * isOverflowing
 * 
 * Checks to see if the element has overflowing content
 * 
 * @returns {}
 */
Element.prototype.isOverflowing = function(){
    return this.scrollHeight > this.clientHeight || this.scrollWidth > this.clientWidth;
}

이렇게 쓰세요.

let elementInQuestion = document.getElementById("id_selector");

    if(elementInQuestion.isOverflowing()){
        // do something
    }

고려해야 할 또 다른 문제는 JS를 사용할 수 없다는 것입니다.점진적인 마법이나 우아한 타락에 대해 생각해 보세요.제안합니다.

• 기본적으로 "추가 버튼" 추가
• 기본적으로 오버플로 규칙 추가
• 숨김 버튼 및 필요에 따라 element.scrollHeight를 element.client와 비교한 후 JS에서 CSS를 변경합니다.높이

js를 사용하여 자식 확인offsetHeight부모보다 더 많다..만약 그렇다면, 부모님을 넘치게 하세요.scroll/hidden/auto당신이 원하는 것, 그리고 또한display:block더 많은 div에..

오버플로우:hidden 및 JQuery height()를 사용하여 요소가 오버플로우되었는지 여부를 판단하고 래퍼와 내부 콘텐츠 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);
});

출처: jsfiddle.net 프레임워크 및 확장

setTimeout(function(){
    isOverflowed(element)           
},500)

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

이건 나한테 효과가 있었어.감사합니다.

이것은 나에게 효과가 있었던 jQuery 솔루션입니다. clientWidth효과가 없었습니다.

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

이 방법으로 동작하지 않으면 요소의 부모 폭이 원하는지 확인합니다(개인적으로는 를 사용해야 했습니다).parent().parent()).position는 부모에 상대적입니다.그리고 또...extra_width내 요소("my elements")에는 로드하는 데 시간이 적게 걸리는 이미지가 포함되어 있지만 함수 호출 중에는 너비가 0이 되어 계산을 방해합니다.이를 피하기 위해 다음 발신 코드를 사용합니다.

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

이게 도움이 됐으면 좋겠다.

답변 대신 [0] 키를 사용하여 다음과 같은 raw 요소에 액세스하는 방법이 있습니다.

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

조건부 가시성을 위해 이벤트청취자를 추가합니다.

document.getElementById('parent').addEventListener('scroll', (e) => {
  const childEl = document.getElementById('child');

  childEl.style.visibility = e.target.scrollTop > 0 ? 'visible' : 'hidden';
});

언급URL : https://stackoverflow.com/questions/9333379/check-if-an-elements-content-is-overflowing