CSS scroll-padding-block-start প্রতিশব্দ

পরিভাষা ও ব্যবহার

scroll-padding-block-start এই এক্সট্রিনিক প্রদান করে, ব্লক দিশায়, কনটেনারের ভাবতীয় স্থান থেকে সাব-এলিমেন্টের স্থান পর্যন্ত দূরত্বকে।

তারমধ্যে, আপনি সরবরাহ করলে, সরবরাহটি দ্রুতগতিতে সমায়ী হবে এবং ব্লক দিশায়, আটস্যাক্ট অবস্থান এবং কনটেনারের মধ্যে নির্দিষ্ট দূরত্বে থাকবে。

ব্লক দিশা বর্তমান লাইনের প্রতিরূপ থেকে, পরবর্তী লাইনটি যেভাবে লাগানো হবে, তাকে বোঝায়। এটি হলো CSS display: block; এর সাথে ব্লক ট্যাগ (যেমন <p> এবং <div> ট্যাগ) পেজের অবস্থান পদ্ধতি। ব্লক দিশা লিখন ভাষা অনুযায়ী নির্ধারিত হয়, যেমন, মঙ্গোলীয় ভাষায় নতুন লাইন বাম থেকে ডানে প্রসারিত হয়, তাই ব্লক দিশা বাম থেকে ডানে হয়, যখন ইংরেজি পেজের ব্লক দিশা নীচে থাকে। ব্লক দিশা CSS এক্সট্রিনিক হতে পারে, writing-mode দ্বারা নির্ধারিত হয়।

অ্যাট্রাকশন স্থান হল যখন আপনি স্ক্রোল করে থাকেন, সাব-ইলেকট্রনটি কনটেনারে অ্যাট্রাকশনের স্থানে আটকে যাওয়ার স্থান

নোট:এই অ্যাট্রিবিউটটি শুধুমাত্র ব্লক দিকের সাব-ইলেকট্রনের উপর scroll-snap-align অ্যাট্রিবিউট নির্ধারণ করতে হবে কার্যকর হয়

যখন scroll-snap-align-এর মান 'start' হয় scroll-padding-block-start দেখার জন্য সাব-ইলেকট্রনের উপর scroll-snap-align অ্যাট্রিবিউট নির্ধারণ করতে হবে অ্যাট্রিবিউট, এবং পিতৃ ইলেকট্রনের উপর scroll-snap-align অ্যাট্রিবিউট নির্ধারণ করুন scroll-padding-block-start এবং scroll-snap-type অ্যাট্রিবিউট

উদাহরণ

উদাহরণ 1

কনটেনার থেকে অ্যাট্রাকশনের স্থান পর্যন্ত ব্লক দিকের স্ক্রোল ইন্টারন্যাপটিং প্রস্থতা 20px নির্ধারণ করুন:

div {
  scroll-padding-block-start: 20px;
}

আপনার নিজেই প্রয়াস করুন

উদাহরণ 2: ছবি সংগ্রহ

অ্যাট্রাকশন ব্যবহারকারী ছবি গ্যালারিতে, scroll-padding-block-start অ্যাট্রিবিউটটি ছবিটিকে স্থায়ী ইলেকট্রনের নীচে ঠিক করে দেয়:

#container {
  scroll-padding-block-start: 30px;
}

আপনার নিজেই প্রয়াস করুন

উদাহরণ 3

যখন কনটেনার ইলেকট্রনের writing-mode অ্যাট্রিবিউটটির মান যখন vertical-rl হয়, ব্লক দিকের কনটেনারের ভাব ও সাব-ইলেকট্রনগুলির শীর্ষ থেকে ডানদিকে সরে যায়। এটি স্ক্রোল অ্যাট্রাকশন ব্যবহার এবং scroll-padding-block-start অ্যাট্রিবিউটটির কাজকর্ম হল:

#container {
  scroll-padding-block-start: 20px;
  writing-mode: vertical-rl;
}

আপনার নিজেই প্রয়াস করুন

CSS গঠনশৈলী

scroll-padding-block-start: auto|value|initial|inherit;

অ্যাট্রিবিউট মান

মান বর্ণনা
auto ডিফল্ট মান
length

scroll-padding-block-start-এর মান নির্দিষ্ট করুন, ইউনিট হিসাবে px, pt, cm ইত্যাদি ব্যবহার করুন。

নেতিবাচক মান ব্যবহার করা যায় না। দেখুন:หน่วยเรียนความยาว CSS。
% এই অ্যাট্রিবিউটকে অন্তর্ভুক্ত করুন যাতে উপাদানের প্রস্থতা প্রতিশতে ক্যালিকুলেট করা হয়।
initial এই অ্যাট্রিবিউটকে তার ডিফল্ট মানে সংযোজিত করুন। দেখুন initial。
inherit এই অ্যাট্রিবিউটটি পিতৃ ইলেকট্রনের থেকে উত্তরণ করে। দেখুন inherit。

প্রযুক্তিগত বিবরণ

ডিফল্ট মান: auto
প্রবর্তনকারী: না
অ্যানিমেশন নির্মাণ: সমর্থিত না। দেখুন:অ্যানিমেশন-সংক্রান্ত অ্যাট্রিবিউট。
সংস্করণ: CSS3
JavaScript গঠনশৈলী: object.style.scrollPaddingBlockStart="20px"

ব্রাউজার সমর্থন

টেবিলের সংখ্যা এই প্রক্রিয়াটির প্রথম সম্পূর্ণ সমর্থনকারী ব্রাউজার সংস্করণটির জন্য দেখানো হয়。

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 15.0 56.0

সংশ্লিষ্ট পৃষ্ঠা

উল্লেখ:CSS scroll-snap-align প্রতিশব্দ

উল্লেখ:CSS scroll-snap-type প্রতিশব্দ

উল্লেখ:CSS writing-mode এটিবিউট