কোনও উপাদানটির সামগ্রী প্রবাহিত হচ্ছে কিনা তা পরীক্ষা করে দেখুন?

153

কোনও উপাদান উপচে পড়েছে কিনা তা সনাক্ত করার সহজতম উপায় কী?

আমার ব্যবহারের ক্ষেত্রেটি হল, আমি 300px উচ্চতা পেতে একটি নির্দিষ্ট সামগ্রী বাক্সকে সীমাবদ্ধ করতে চাই। যদি অভ্যন্তরীণ সামগ্রী এর চেয়ে লম্বা হয় তবে আমি এটিকে একটি ওভারফ্লো দিয়ে কেটে ফেললাম। তবে যদি এটি উপচে পড়ে যায় তবে আমি একটি 'আরও' বোতামটি দেখাতে চাই, তবে তা না হলে আমি এই বোতামটি দেখাতে চাই না।

ওভারফ্লো সনাক্ত করার কোনও সহজ উপায় আছে, বা এর চেয়ে আরও ভাল কোনও পদ্ধতি আছে?

javascript css overflow

— লুণ্ঠন করা
সূত্র

86

আপনি যদি আরও সামগ্রীর জন্য কেবল একটি সনাক্তকারী দেখাতে চান তবে আপনি খাঁটি সিএসএস দিয়ে এটি করতে পারেন। আমি এর জন্য খাঁটি স্ক্রোলিং শ্যাডো ব্যবহার করি। কৌশলটি ব্যবহারটি 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/ ।

— RWAM
সূত্র

1

দুর্দান্ত ধারণা তবে আপনার উদাহরণে পটভূমির (ছায়া) পাঠ্যের পিছনে থাকবে!

— ড্রিমটেক

দুর্দান্ত কৌশল, তবে ক্রোমে এটি নীচে কেবল স্থির ছায়া দেখায়, এটি কখনও অদৃশ্য হয় না এবং উপরের ছায়া কখনও দেখায় না

— জারেড

214

উপাদানটি উল্লম্ব, অনুভূমিকভাবে বা উভয়ই উপচে পড়ে থাকতে পারে। যদি ডিওএম উপাদানটি ওভারফ্লোড হয় তবে এই ফাংশনটি আপনাকে একটি বুলিয়ান মান প্রদান করবে:

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

— micnic
সূত্র

41

দুর্দান্ত সমাধান! এখানে একটি jQuery বৈকল্পিক (এর সাথে ব্যবহার করার জন্য $("#element").overflown()):$.fn.overflown=function(){var e=this[0];return e.scrollHeight>e.clientHeight||e.scrollWidth>e.clientWidth;}

— সিগমোরাল

@ অদ্ভুত হাই, আমি আয়নিক 2 ব্যবহার করছি এবং একই জিনিসটি করার চেষ্টা করছি ... তবে ফাংশনটি সর্বদা সত্য হয় ... কৌনিক 2 তে কিছু করার আলাদা উপায় আছে কি

— ইয়াসির

@ ডেভিডব্রাকলি, এই ফাংশনটি খাঁটি ডোম এপিআইয়ের জন্য, আমার আয়নিক / কৌনিক সংক্রান্ত অভিজ্ঞতা নেই, আমার ধারণা আপনার আসল ডোম এলিমেন্টটি পাওয়া উচিত এবং এই ফাংশনটি ব্যবহার করা উচিত

— মিকনিক

3

কেবল ফায়ারফক্সের জন্য: element.addEventListener ("overflow", () => log( "overflow" ), false);তথ্যসূত্র: ওভারফ্লো ইভেন্ট

— রেজা

18

তুলনা টাস্ক element.scrollHeightকরা element.clientHeightউচিত।

নীচে এমডিএন থেকে চিত্রগুলি এলিমেন্ট.স্ক্রোলহাইট এবং এলিমেন্ট.ক্লিয়েন্টহাইট ব্যাখ্যা করছে।

— Bergi
সূত্র

2

হ্যাঁ, তবে কুইর্কস্মোড অনুসারে এটি সবচেয়ে বেশি কাজ করে - এবং অন্যান্য পোস্ট সমাধানগুলির তুলনায় অনেক সহজ।

— বার্গি

@ হ্যারি: এটি সমস্ত বর্তমান ব্রাউজারগুলিতে সমর্থিত (কমপক্ষে ডেস্কটপগুলি), সুতরাং এটি আনুষ্ঠানিকভাবে নন-স্ট্যান্ডার্ড হওয়ার কোনও বিষয় নয়।

— মারাত তানালিন

1

এখানে, এই বৈশিষ্ট্যের সর্বদা একই মান থাকে।

— কোপ্পর

7

আমি উপরের উত্তরগুলি (যেমন ওভারফ্লো লুকানো এবং উচ্চতা ব্যবহার করে) দেখিয়ে একটি বহুমাত্রিক কোডপেন তৈরি করেছি তবে কীভাবে আপনি ওভারফ্লোড আইটেমগুলি প্রসারিত / পতন করবেন

উদাহরণ 1: https://codepen.io/Kagerjay/pen/rraKLB (সত্যিকারের সহজ উদাহরণ, জাভাস্ক্রিপ্ট নেই, কেবল উপচে পড়া আইটেমগুলি ক্লিপ করতে)

উদাহরণ 2: https://codepen.io/Kgarjay/pen/LBErJL (একক ইভেন্ট হ্যান্ডলার আরও / বহমান আইটেমগুলিতে শোলেস প্রদর্শন করুন)

উদাহরণ 3: https://codepen.io/Kgarjay/pen/MBYBoJ (বহুতে বহু অনুষ্ঠানের হ্যান্ডলার আরও বেশি দেখায় / উপচে পড়া আইটেমগুলিতে কম দেখায়)

আমি নীচে 3 উদাহরণও সংযুক্ত করেছি , আমি জেড / পাগ ব্যবহার করি যাতে এটি টিড ভার্বোস হতে পারে। আমি কোডেপেনগুলি যাচাই করা সহজ করে তুলেছি তা পরীক্ষা করে দেখার পরামর্শ দিই।

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

স্নিপেট প্রসারিত করুন

— ভিনসেন্ট টাং
সূত্র

4

এর মতো কিছু হবে: http://jsfiddle.net/Skooljester/jWRRA/1/ কাজ? এটি কেবল সামগ্রীর উচ্চতা পরীক্ষা করে এবং এটি ধারকটির উচ্চতার সাথে তুলনা করে। যদি এটির চেয়ে বেশি হয় তবে "আরও দেখান" বোতাম সংযুক্ত করার জন্য কোডটিতে রাখতে পারেন।

আপডেট: ধারকটির শীর্ষে "আরও দেখান" বোতামটি তৈরি করতে কোড যুক্ত করা হয়েছে।

— ayyp
সূত্র

3

আপনি যদি jQuery ব্যবহার করে থাকেন তবে আপনি একটি কৌশল চেষ্টা করতে পারেন: overflow: hiddenসামগ্রী দিয়ে বাইরের ডিভ এবং অভ্যন্তরীণ ডিভ তৈরি করুন। তারপরে .height()অভ্যন্তরীণ ডিভের উচ্চতা বাইরের ডিভের উচ্চতার চেয়ে বেশি কিনা তা পরীক্ষা করতে ফাংশনটি ব্যবহার করুন । আমি নিশ্চিত না যে এটি কাজ করবে তবে চেষ্টা করে দেখুন।

— জেনকিন্স টিএমএস
সূত্র

1

সন্তানের offsetHeightপিতামাতার চেয়ে বেশি কিনা তা পরীক্ষা করতে জেএস ব্যবহার করুন .. এটি যদি হয় তবে scroll/hidden/autoআপনি যেটি চান পিতামাতাকে উপচে ফেলুন display:blockএবং আরও ডিভিডিতে ..

— বিবেক চন্দ্র
সূত্র

1

আপনি অফসেট পিতামাতার সাথে সম্পর্কিত সীমাটি চেক করতে পারেন।

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

আপনি যদি কোনও উপাদানটি পাস করেন তবে এটি আপনাকে জানায় যে এর সীমানাগুলি পুরোপুরি কোনও ধারকটির ভিতরে রয়েছে কিনা এবং কোনও স্পষ্টত ধারক সরবরাহ না করা থাকলে উপাদানটির অফসেট পিতামাতার কাছে ডিফল্ট হবে। এটি ব্যবহার করে

— মাইক স্যামুয়েল
সূত্র

1

আপনার আর একটি বিষয় বিবেচনা করা উচিত যা জেএস অপ্রাপ্যতা। প্রগতিশীল জাদু বা কৌতূহলী অবক্ষয়ের কথা ভাবেন। আমি সুপারিশ করবে:

ডিফল্টরূপে "আরও বোতাম" যুক্ত করা হচ্ছে
ডিফল্টরূপে ওভারফ্লো নিয়ম যুক্ত করা
এলিমেন্টের সাথে তুলনা করার পরে জেএসে সিএসএস পরিবর্তন প্রয়োজন হলে বোতামটি লুকিয়ে রাখা হচ্ছে

— MFix
সূত্র

1

ওভারফ্লো সহ একটি র‌্যাপার ডিভি ব্যবহার করে কোনও উপাদান উপচে পড়েছে কিনা তা নির্ধারণের জন্য এখানে একটি মূর্খতা রয়েছে: মোড়ক এবং জিকুয়ের উচ্চতা () মোড়ক এবং অভ্যন্তরীণ সামগ্রীর দ্বিগুলির মধ্যে পার্থক্য পরিমাপ করতে।

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 এ ফ্রেমওয়ার্ক এবং এক্সটেনশনগুলি

— user1295799
সূত্র

1

এটি আমার জন্য কাজ করা jQuery সমাধান। clientWidthইত্যাদি কাজ করেনি।

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

এই কাজ না করে তাহলে, নিশ্চিত করুন যে উপাদান 'মূল পছন্দসই প্রস্থ আছে (ব্যক্তিগতভাবে, আমি ব্যবহার করতে হয়েছে parent().parent())। positionপিতা বা মাতা আপেক্ষিক নয়। আমিও অন্তর্ভুক্ত করেছি extra_widthকারণ আমার উপাদানের ( "ট্যাগ") ইমেজ যা ছোট সময় লাগতে থাকে লোড করুন, তবে ফাংশন কলের সময় তাদের শূন্য প্রস্থ রয়েছে, গণনাটি নষ্ট করে দিচ্ছে that

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

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

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

এটি আমার জন্য কাজ করা হয়েছিল। ধন্যবাদ.

— Krunal
সূত্র

3

এটি মিকনিকের উত্তর থেকে কীভাবে আলাদা?

— সাবধান1

0

উত্তরের jquery বিকল্পটি হ'ল কাঁচা উপাদান অ্যাক্সেস করতে [0] কী ব্যবহার করা যেমন:

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

— অ্যান্টনি
সূত্র

0

এনক্যাপসুলেশন কারণে আমি এলিমেন্টটি প্রসারিত করেছি। মিকনিক উত্তর থেকে।

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

— ডেভিড ক্লিউস
সূত্র