কীভাবে আমি একটি ওভারফ্লো: লুকানো বা ওভারফ্লো: স্ক্রোল ডিভের আসল। উচ্চতা () পাই?

Question

ডিভি উচ্চতা কীভাবে পাবেন সে সম্পর্কে আমার একটি প্রশ্ন আছে। আমি সচেতন এবং .height()এবং innerHeight()তবে তাদের মধ্যে কেউই এই ক্ষেত্রে আমার পক্ষে কাজ করে না। জিনিসটি এই ক্ষেত্রে আমার একটি ডিভ রয়েছে যা ওভারফ্লোড প্রস্থের ওভারফ্লো: স্ক্রোল এবং ডিভের একটি নির্দিষ্ট উচ্চতা রয়েছে।

যদি আমি ব্যবহার করি .height()বা innerHeight(), উভয়ই আমাকে দৃশ্যমান ক্ষেত্রের উচ্চতা দেয় তবে আমি যদি ওভারফ্লাউনটি অ্যাকাউন্টে নেওয়া চাই তবে আমি কীভাবে যাব?

Answer 1

.scrollHeightডোম নোডের সম্পত্তি ব্যবহার করুন :$('#your_div')[0].scrollHeight

Comments

মতে মন্তব্য এখানে.scrollHeight করে DOM ফাংশন ইন্টারনেট <8.0 (কাজ করবে না developer.mozilla.org/en/DOM/element.scrollHeight )

— জেনকিন্স টিএমএস

scrollHeightএছাড়াও কখনও কখনও শূন্য থাকে যখন এটি লুকানো থাকে (বা এর পিতামাতাই লুকিয়ে থাকে), বিরক্তিকরভাবে।

— সাইমন ইস্ট

আরও সঠিকভাবে use ('# আপনার_ডিব') ব্যবহার করুন prop ('স্ক্রোলহাইট');

— লুবিমভ রোমান

@ সিমন আমার ক্ষেত্রে এটি কেবলমাত্র একটি উপাদানের সাথে দৃশ্যমান পিক্সেলের সংখ্যা overflow: hidden

— পেরে

খাঁটি জাভাস্ক্রিপ্ট:document.getElementById('your_div').scrollHeight

— স্টাম্বিক্ক

Answer 2

.scrollHeightসম্পত্তি সম্পর্কে আরও তথ্যের জন্য ডক্সটি দেখুন :

Element.scrollHeight শুধুমাত্র পাঠযোগ্য অ্যাট্রিবিউট একটি উপাদান বিষয়বস্তুর উচ্চতার একটি পরিমাপ, বিষয়বস্তু ওভারফ্লো কারণে পর্দায় দৃশ্যমান নয় সহ হয়। স্ক্রোলহাইট মানটি ন্যূনতম ক্লায়েন্টের সমান হুইটিক্যাল স্ক্রোলবার ব্যবহার না করেই ভিউপয়েন্টে সমস্ত সামগ্রী ফিট করার জন্য উপাদানটির উচ্চমাত্রার উচ্চমাত্রার প্রয়োজন হয়। এটিতে এলিমেন্ট প্যাডিং অন্তর্ভুক্ত রয়েছে তবে এর মার্জিনটি নেই।

Answer 3

অন্য সম্ভাবনাটি এইচটিএমএলকে একটি অজানা প্রবাহে স্থাপন করবে: লুকানো উপাদানটি পর্দার বাইরে 'আউট' রাখে, পজিশন পরম উপরে এবং বাম দিকে কম 5000 পিক্সের মতো, তারপরে এই উপাদানগুলির উচ্চতাটি পড়ুন। এটি কুৎসিত, কিন্তু ভাল কাজ।

Comments

আমি এসইও বিষয়গুলির জন্য এটি ব্যবহার করার পরামর্শ দিচ্ছি না এটি পর্দার পাঠককে অদ্ভুত বলে মনে হতে পারে। আপনি যদি এটি করেন তবে আপনাকে HTML পড়ার সময় কেবল একটি ডিভিতে রাখতে হবে এবং জাভাস্ক্রিপ্টের সাথে সাথে তা তাত্ক্ষণিকভাবে অপসারণ করতে হবে। তবে গৃহীত উত্তর এই পরিস্থিতির জন্য আরও ভাল

— ইয়ান চ্যাবট

Answer 4

আমি এর জন্য আরও একটি সমাধান প্রস্তুত করেছি, যেখানে উচ্চ-সর্বাধিক উচ্চতার মানটি ব্যবহার করার দরকার নেই। ধসে পড়া ডিআইভি-র অভ্যন্তরীণ উচ্চতা গণনা করার জন্য জাভাস্ক্রিপ্ট কোডের কয়েকটি লাইনের প্রয়োজন তবে এর পরে এটি সমস্ত সিএসএস।

1) আনয়ন এবং উচ্চতা নির্ধারণ

ধসে পড়া উপাদানটির অভ্যন্তরের উচ্চতা আনুন (ব্যবহার করে scrollHeight)। আমার উপাদানটির একটি বর্গ রয়েছে .section__accordeon__contentএবং আমি forEach()সমস্ত প্যানেলের উচ্চতা নির্ধারণ করতে এটি একটি লুপে চালিত করি তবে আপনি ধারণাটি পাবেন।

document.querySelectorAll( '.section__accordeon__content' ).style.cssText = "--accordeon-height: " + accordeonPanel.scrollHeight + "px";

2) সক্রিয় আইটেমটি প্রসারিত করতে CSS ভেরিয়েবল ব্যবহার করুন

এরপরে, max-heightআইটেমটির একটি .activeশ্রেণি থাকে যখন মান সেট করতে সিএসএস ভেরিয়েবল ব্যবহার করুন ।

.section__accordeon__content.active {
  max-height: var(--accordeon-height);
}

চূড়ান্ত উদাহরণ

সুতরাং সম্পূর্ণ উদাহরণটি এর মতো হয়: সমস্ত অ্যাকডিয়ন প্যানেলগুলির মধ্যে প্রথমে লুপ করুন এবং scrollHeightসিএসএস ভেরিয়েবল হিসাবে তাদের মানগুলি সংরক্ষণ করুন । এরপরে max-heightউপাদানটির সক্রিয় / প্রসারিত / উন্মুক্ত স্থানে মান হিসাবে সিএসএস ভেরিয়েবল ব্যবহার করুন ।

javascript:

document.querySelectorAll( '.section__accordeon__content' ).forEach(
  function( accordeonPanel ) {
    accordeonPanel.style.cssText = "--accordeon-height: " + accordeonPanel.scrollHeight + "px";
  }
);

সিএসএস:

.section__accordeon__content {
  max-height: 0px;
  overflow: hidden;
  transition: all 425ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

.section__accordeon__content.active {
  max-height: var(--accordeon-height);
}

এবং সেখানে আপনি এটা আছে। কেবল সিএসএস এবং জাভাস্ক্রিপ্ট কোডের কয়েকটি লাইন (কোনও জিকুয়ের প্রয়োজন নেই) ব্যবহার করে একটি অভিযোজিত সর্বোচ্চ-উচ্চতা অ্যানিমেশন।

আশা করি এটি ভবিষ্যতে কাউকে সহায়তা করবে (বা রেফারেন্সের জন্য আমার ভবিষ্যত স্ব)।

Answer 5

যারা উপচে পড়া নয় তবে নেতিবাচক মার্জিনের দ্বারা লুকিয়ে আছেন:

$('#element').height() + -parseInt($('#element').css("margin-top"));

(কুরুচিপূর্ণ তবে কেবলমাত্র এখন পর্যন্ত কাজ করে)

Answer 6

আর একটি সহজ সমাধান (খুব মার্জিত নয়, তবে খুব কুরুচিপূর্ণও নয়) হ'ল একটি অভ্যন্তর স্থাপন করুন div / spanতার উচ্চতা প্রাপ্ত করুন ( $(this).find('span).height())

এই কৌশলটি ব্যবহারের উদাহরণ এখানে:

$(".more").click(function(){
if($(this).parent().find('.showMore').length) {
$(this).parent().find('.showMore').removeClass('showMore').css('max-height','90px');
$(this).parent().find('.more').removeClass('less').text('More');
} else {
$(this).parent().find('.text').addClass('showMore').css('max-height',$(this).parent().find('span').height());
$(this).parent().find('.more').addClass('less').text('Less');
}
});

* {transition: all 0.5s;}
.text {position:relative;width:400px;max-height:90px;overflow:hidden;}
.showMore {}
.text::after {
  content: "";
    position: absolute; bottom: 0; left: 0;
        box-shadow: inset 0 -26px 22px -17px #fff;
    height: 39px;
  z-index:99999;
  width:100%;
  opacity:1;
}
.showMore::after {opacity:0;}
.more {border-top:1px solid gray;width:400px;color:blue;cursor:pointer;}
.more.less {border-color:#fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="text">
<span>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</span></div>
<div class="more">More</div>
</div>

(এই সুনির্দিষ্ট উদাহরণটি এই কৌশলটি সর্বাধিক উচ্চতা অ্যানিমেট করার জন্য ব্যবহার করছে এবং ধসে পড়ার সময় অ্যানিমেশন বিলম্ব এড়ানোর জন্য (সর্বাধিক উচ্চতার সম্পত্তির জন্য উচ্চ সংখ্যা ব্যবহার করার সময়))।