অফসেটউইথ, ক্লায়েন্ট উইথ, স্ক্রোলউইথ এবং -হাইট যথাক্রমে বোঝা যাচ্ছে

Question

অফসেটউইথ / ক্লায়েন্টউইথ / স্ক্রোলউইথ (এবং -হাইটি যথাক্রমে) সম্পর্কিত স্ট্যাকওভারফ্লোতে বেশ কয়েকটি প্রশ্ন রয়েছে তবে এই মানগুলি কী তা সম্পর্কে কোনও একটিই এর বিস্তৃত ব্যাখ্যা দেয় না।

এছাড়াও, ওয়েবে বিভিন্ন উত্স বিভ্রান্তিকর বা ভুল তথ্য দেয়।

আপনি কিছু চাক্ষুষ ইঙ্গিত সহ একটি সম্পূর্ণ ব্যাখ্যা দিতে পারেন? এছাড়াও, কীভাবে এই মানগুলি স্ক্রোল বারের প্রস্থ গণনা করতে ব্যবহার করা যেতে পারে?

Answer 1

সিএসএস বক্স মডেলটি বরং জটিল, বিশেষত যখন কন্ট্রোলের বিষয়বস্তু নিয়ে আসে। ব্রাউজারটি বাক্সগুলি আঁকার জন্য আপনার সিএসএস থেকে মানগুলি ব্যবহার করে, জেএস ব্যবহার করে সমস্ত মাত্রা নির্ধারণ করে যদি আপনার কাছে কেবল সিএসএস থাকে তবে সরাসরি-অগ্রসর হয় না।

কেন যে প্রতিটি উপাদান আপনার সুবিধার জন্য ছয় করে DOM বিধি রয়েছে: offsetWidth, offsetHeight, clientWidth, clientHeight, scrollWidthএবং scrollHeight। এগুলি কেবলমাত্র বর্তমান ভিজ্যুয়াল লেআউটকে উপস্থাপন করে কেবল পঠনযোগ্য বৈশিষ্ট্য এবং এগুলির সবগুলিই পূর্ণসংখ্যা (এইভাবে সম্ভবত গোলাকার ত্রুটির সাপেক্ষে)।

আসুন তাদের মাধ্যমে বিস্তারিতভাবে যান:

• offsetWidth, offsetHeight: সমস্ত সীমানা incuding ভিজ্যুয়াল বক্স আকার। উপাদানটি থাকলে width/ heightএবং প্যাডিংস এবং সীমানা যুক্ত করে গণনা করা যায়display: block
• clientWidth, clientHeight: বক্স সামগ্রীগুলির ভিজ্যুয়াল অংশে সীমানা বা স্ক্রোল বারগুলি অন্তর্ভুক্ত নয়, তবে এতে প্যাডিং রয়েছে। সরাসরি সিএসএস থেকে গণনা করা যায় না, এটি সিস্টেমের স্ক্রোল বারের আকারের উপর নির্ভর করে।
• scrollWidth, scrollHeight: বাক্সের সমস্ত সামগ্রীর আকার, বর্তমানে স্ক্রোলিংয়ের বাইরে লুকিয়ে থাকা অংশগুলি সহ। সিএসএস থেকে সরাসরি গণনা করা যায় না, বিষয়বস্তুর উপর নির্ভর করে।

এটি ব্যবহার করে দেখুন: জেএসফিডাল

---

যেহেতু offsetWidthস্ক্রোল বার প্রস্থকে অ্যাকাউন্টে নেয়, তাই আমরা সূত্রের মাধ্যমে স্ক্রোল বার প্রস্থ গণনা করতে এটি ব্যবহার করতে পারি

scrollbarWidth = offsetWidth - clientWidth - getComputedStyle().borderLeftWidth - getComputedStyle().borderRightWidth

দুর্ভাগ্যক্রমে, আমরা রাউন্ডিং ত্রুটিগুলি পেতে পারি, যেহেতু offsetWidthএবং clientWidthসর্বদা পূর্ণসংখ্যার, প্রকৃত আকারগুলি 1 ব্যতীত জুম স্তরের সাথে ভগ্নাংশ হতে পারে।

এটি নোট করুন

scrollbarWidth = getComputedStyle().width + getComputedStyle().paddingLeft + getComputedStyle().paddingRight - clientWidth

ক্রোম নির্ভরযোগ্যভাবে কাজ করে না , যেহেতু ক্রোম widthইতিমধ্যে সঙ্কলিত স্ক্রোলবারের সাথে ফিরে আসে । (এছাড়াও, ক্রোমটি স্ক্রোল সামগ্রীর নীচে প্যাডিংবোর্ড উপস্থাপন করে, অন্য ব্রাউজারগুলি না করে)

Comments

পূর্ণসংখ্যার চেয়ে সূক্ষ্ম গ্রানুলারিটি সন্ধানকারীদের জন্য, ব্যবহার করুন element.getBoundingClientRect()(নোটটি বিকাশকারী.মোজিলা.আর.ইন-

— আনসন কাও

নোট করুন যে আপনার লেআউটের উপর নির্ভর করে, স্ক্রোলউইথ এবং স্ক্রোলহাইট আপনার সিউডো উপাদানগুলির আকার পেতে :: এবং তার আগে :: পরে সত্যই কার্যকর হতে পারে।

— ডেভিড

এছাড়া, এটিও কিভাবে এই কহা কি ব্যাখ্যা করতে দরকারী হবে naturalWidthএবংnaturalHeight

— YakovL

কেন scrollHeightঅন্তর্ভুক্ত padding-bottomকিন্তু scrollWidthঅন্তর্ভুক্ত নয়padding-right

— JunGor

clientWidthজন্য document.documentElement.clientWidthবিভিন্ন যেমন অন্তর্ভুক্ত করা মনে হয় padding, bordersএবংmargin

— Drenai

Answer 2

আমি একটি আরও বিস্তৃত এবং ক্লিনার সংস্করণ তৈরি করেছি যা কিছু লোক কোন নামটি কোন মানের সাথে মিল রাখে তা মনে রাখার জন্য দরকারী খুঁজে পেতে পারে। আমি ক্রোম ডেভ টুল এর রঙ কোড ব্যবহার করেছি এবং লেবেলগুলিকে অ্যানালজিগুলি দ্রুত বাছাই করার জন্য প্রতিসম আকারে সংগঠিত করেছি:

• নোট 1: clientLeftপাঠ্যের দিকটি ডান থেকে বামে সেট করা থাকলে (যে ক্ষেত্রে বারটি বামদিকে প্রদর্শিত হয়) তবে উল্লম্ব স্ক্রোল বারের প্রস্থকেও অন্তর্ভুক্ত করে

• দ্রষ্টব্য 2: বাইরেরতম লাইনটি নিকটস্থ অবস্থানযুক্ত পিতামাতাকে উপস্থাপন করে (এমন একটি উপাদান যার positionসম্পত্তি staticবা তার চেয়ে আলাদা মানকে সেট করা হয় initial)। সুতরাং, যদি সরাসরি ধারক একটি নয় স্থান উপাদান, তারপর লাইন শ্রেণীবিন্যাসে প্রথম ধারক কিন্তু অন্য উপাদান অনুক্রমের উচ্চতর প্রতিনিধিত্ব করে না। যদি কোনও অবস্থানযুক্ত পিতামাতাকে খুঁজে পাওয়া যায় না, তবে ব্রাউজারটি htmlবা body উপাদানটিকে রেফারেন্স হিসাবে গ্রহণ করবে

---

আশা করি যে কেউ এটি দরকারী, কেবল আমার 2 সেন্ট;)

Answer 3

যদি আপনি "বাস্তব" বিষয়বস্তু প্রস্থ / উচ্চতা পেতে (যেমন বিষয়বস্তু সিএসএস-সংজ্ঞায়িত প্রস্থ / উচ্চতা-বাক্সের চেয়ে বড় হতে পারে) পেতে স্ক্রোলউইথ / উচ্চতা খুব অপূরণীয় কারণ কোনও ব্রাউজারটি প্যাডিংয়ের অধিকারকে "সরান" বলে মনে হয় কনটেন্ট বড় হলে প্যাডিংবটম OM তারপরে তারা "খুব বিস্তৃত / উচ্চ সামগ্রী" এর নীচে / নীচে প্যাডিংগুলি রাখে (নীচের চিত্রটি দেখুন)।

==> অতএব কিছু ব্রাউজারগুলিতে রিয়েল কন্টেন্ট প্রস্থটি পেতে আপনাকে স্ক্রোলউইথ থেকে দুটি প্যাডিংগুলি বিয়োগ করতে হবে এবং কিছু ব্রাউজারে আপনাকে কেবল বাম প্যাডিংটি করতে হবে।

আমি এর জন্য একটি সমাধান খুঁজে পেয়েছি এবং এটি একটি মন্তব্য হিসাবে যুক্ত করতে চেয়েছিলাম, তবে অনুমতি দেওয়া হয়নি। তাই আমি "মুভিড প্যাডিংস" এবং "অবিশ্বাস্য স্ক্রোলউইথ" এর বিষয়ে ছবিটি তুলে কিছুটা পরিষ্কার করেছিলাম। নীল অঞ্চলে আপনি কীভাবে "সত্যিকারের" বিষয়বস্তুর প্রস্থ পাবেন সে সম্পর্কে আমার সমাধানটি খুঁজে পান!

আশা করি এটি বিষয়গুলিকে আরও পরিষ্কার করে তুলতে সহায়তা করবে!

Answer 4

এমডিএন-তে একটি ভাল নিবন্ধ রয়েছে যা এই ধারণাগুলির পিছনে তত্ত্বটি ব্যাখ্যা করে: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Dertermining_the_dimension_of_e উপাদান

এটি বাউন্ডিং ক্লায়েন্টআরেক্টের প্রস্থ / উচ্চতা বনাম অফসেটউইথ / অফসেটহাইটের মধ্যে গুরুত্বপূর্ণ ধারণাগত পার্থক্য ব্যাখ্যা করে।

তারপরে, তত্ত্বটি সঠিক বা ভুল প্রমাণ করতে আপনার কিছু পরীক্ষা দরকার। আমি এখানে যা করেছি তা হ'ল: https://github.com/lingtalfi/dimension-cheatsheet

এটি ক্রোম 5৩, এফএফ 49, সাফারি 9, এজ 13 এবং আই 11 এর পরীক্ষা করছে।

পরীক্ষার ফলাফলগুলি প্রমাণ করে যে তত্ত্বটি সাধারণত সঠিক। পরীক্ষাগুলির জন্য, আমি 3 টি ডিভ তৈরি করেছি যার মধ্যে 10 টি লিপস আইপসাম অনুচ্ছেদ রয়েছে। কিছু সিএসএস তাদের প্রয়োগ করা হয়েছিল:

.div1{
    width: 500px;
    height: 300px;
    padding: 10px;
    border: 5px solid black;
    overflow: auto;
}
.div2{
    width: 500px;
    height: 300px;
    padding: 10px;
    border: 5px solid black;
    box-sizing: border-box;
    overflow: auto;
}

.div3{
    width: 500px;
    height: 300px;
    padding: 10px;
    border: 5px solid black;
    overflow: auto;
    transform: scale(0.5);
}

এবং ফলাফল এখানে:

• div1

  • অফসেটউইথ: 530 (ক্রোম 53, এফএফ 49, সাফারি 9, এজ 13, ie11)
  • অফসেটহাইট: 330 (ক্রোম 53, এফএফ 49, সাফারি 9, এজ 13, ie11)
  • বিসিআরউইথ: 530 (ক্রোম 53, এফএফ 49, সাফারি 9, এজ 13, ie11)

  • বিসিআর উচ্চতা: 330 (ক্রোম 53, এফএফ 49, সাফারি 9, এজ 13, ie11)

  • ক্লায়েন্টউইথ: 505 (ক্রোম 53, এফএফ 49, সাফারি 9)

  • ক্লায়েন্টউইথ: 508 (প্রান্ত 13)
  • ক্লায়েন্টউইথ: 503 (ie 11)

  • ক্লায়েন্টহাইট: 320 (ক্রোম 53, এফএফ 49, সাফারি 9, এজ 13, অর্থাৎ 11)

  • স্ক্রোলউইথ: 505 (ক্রোম 53, সাফারি 9, এফএফ 49)

  • স্ক্রোলউইথ: 508 (প্রান্ত 13)
  • স্ক্রোলউইথ: 503 (ie 11)
  • স্ক্রোলহাইট: 916 (ক্রোম 53, সাফারি 9)
  • স্ক্রোলহাইট: 954 (ff49)
  • স্ক্রোলহাইট: 922 (প্রান্ত 13, ie 11)

• div2

  • অফসেটউইথ: 500 (ক্রোম 53, এফএফ 49, সাফারি 9, এজ 13, অর্থাৎ 11)
  • অফসেটহাইট: 300 (ক্রোম 53, এফএফ 49, সাফারি 9, এজ 13, অর্থাৎ 11)
  • বিসিআরউইথ: 500 (ক্রোম 53, এফএফ 49, সাফারি 9, এজ 13, ie11)
  • বিসিআর উচ্চতা: 300 (ক্রোম 53, এফএফ 49, সাফারি 9)
  • বিসিআর উচ্চতা: 299.9999694824219 (এজ 13, ie11)
  • ক্লায়েন্টউইথ: 475 (ক্রোম 53, এফএফ 49, সাফারি 9)
  • ক্লায়েন্টউইথ: 478 (প্রান্ত 13)
  • ক্লায়েন্টউইথ: 473 (ie 11)

  • ক্লায়েন্টহাইট: 290 (ক্রোম 53, এফএফ 49, সাফারি 9, এজ 13, ie11)

  • স্ক্রোলউইথ: 475 (ক্রোম 53, সাফারি 9, এফএফ 49)

  • স্ক্রোলউইথ: 478 (প্রান্ত 13)
  • স্ক্রোলউইথ: 473 (ie 11)
  • স্ক্রোলহাইট: 916 (ক্রোম 53, সাফারি 9)
  • স্ক্রোলহাইট: 954 (ff49)
  • স্ক্রোলহাইট: 922 (প্রান্ত 13, ie 11)

• div3

  • অফসেটউইথ: 530 (ক্রোম 53, এফএফ 49, সাফারি 9, এজ 13, ie11)
  • অফসেটহাইট: 330 (ক্রোম 53, এফএফ 49, সাফারি 9, এজ 13, ie11)
  • বিসিআরউইথ: 265 (ক্রোম 53, এফএফ 49, সাফারি 9, এজ 13, ie11)
  • বিসিআর উচ্চতা: 165 (ক্রোম 53, এফএফ 49, সাফারি 9, এজ 13, ie11)
  • ক্লায়েন্টউইথ: 505 (ক্রোম 53, এফএফ 49, সাফারি 9)
  • ক্লায়েন্টউইথ: 508 (প্রান্ত 13)
  • ক্লায়েন্টউইথ: 503 (ie 11)

  • ক্লায়েন্টহাইট: 320 (ক্রোম 53, এফএফ 49, সাফারি 9, এজ 13, অর্থাৎ 11)

  • স্ক্রোলউইথ: 505 (ক্রোম 53, সাফারি 9, এফএফ 49)

  • স্ক্রোলউইথ: 508 (প্রান্ত 13)
  • স্ক্রোলউইথ: 503 (ie 11)
  • স্ক্রোলহাইট: 916 (ক্রোম 53, সাফারি 9)
  • স্ক্রোলহাইট: 954 (ff49)
  • স্ক্রোলহাইট: 922 (প্রান্ত 13, ie 11)

সুতরাং, প্রান্ত 13 এবং ie11 এ সীমাবদ্ধতা ক্লায়েন্টরেক্টের উচ্চতার মান (299.9999694824219) ছাড়াও ফলাফলগুলি নিশ্চিত করে যে এই পেছনের তত্ত্বটি কাজ করে।

সেখান থেকে, এই ধারণাগুলির আমার সংজ্ঞা এখানে দেওয়া হল:

• অফসেটউইথ / অফসেটহাইট: লেআউট বর্ডার বক্সের মাত্রা
• বাউন্ডিং ক্লায়েন্টআরেক্ট: রেন্ডারিং বর্ডার বক্সের মাত্রা
• ক্লায়েন্টউইথ / ক্লায়েন্টহাইট: লেআউট প্যাডিং বাক্সের দৃশ্যমান অংশের মাত্রা (স্ক্রোল বারগুলি বাদে)
• স্ক্রোলউইথ / স্ক্রোলহাইট: লেআউট প্যাডিং বাক্সের মাত্রা যদি এটি স্ক্রোল বার দ্বারা সীমাবদ্ধ না হয়

দ্রষ্টব্য: ডিফল্ট উল্লম্ব স্ক্রোল বারের প্রস্থটি প্রান্ত 13 এ 12px, ক্রোম 53 এ 15px, ff49 এবং সাফারি 9 এবং আই 11 এ 17px (স্ক্রিনশট থেকে ফটোশপের পরিমাপের দ্বারা সম্পন্ন এবং পরীক্ষার ফলাফলের দ্বারা প্রমাণিত)।

তবে, কিছু ক্ষেত্রে, সম্ভবত আপনার অ্যাপ্লিকেশনটি ডিফল্ট উল্লম্ব স্ক্রোল বারের প্রস্থ ব্যবহার করছে না।

সুতরাং, এই ধারণাগুলির সংজ্ঞা দেওয়া, উল্লম্ব স্ক্রোল বারের প্রস্থ (সিউডো কোডে) এর সমান হওয়া উচিত:

• বিন্যাসের মাত্রা: অফসেটউইথ - ক্লায়েন্টউইথ - (সীমানা লেফটভিডথ + বর্ডাররাইটউইথ)

• উপস্থাপনা মাত্রা: সীমানা

দ্রষ্টব্য, যদি আপনি লেআউট বনাম রেন্ডারিং বুঝতে না পারেন তবে দয়া করে এমডিএন নিবন্ধটি পড়ুন।

এছাড়াও, আপনার যদি অন্য কোনও ব্রাউজার থাকে (বা আপনি নিজের পরীক্ষার ফলাফল দেখতে চান), আপনি আমার পরীক্ষার পৃষ্ঠাটি এখানে দেখতে পারেন: http://codepen.io/lingtalfi/pen/BLdBdL