CSS scroll-padding-inline-end প্রতিশব্দ

সংজ্ঞা ও ব্যবহার

scroll-padding-inline-end এই বৈশিষ্ট্যটি কোন্টেইনার শেষ থেকে সাব-এলিমেন্ট সামন্য অবস্থানের মধ্যে ইনলাইন দিশায় দূরত্ব নির্দিষ্ট করে

এর মানে, যখন আপনি রোলটি থেমানোর পর, রোলটি দ্রুত অনুবর্তন করবে এবং কোন্টেইনার এবং সামন্য অবস্থানের মধ্যে নির্দিষ্ট দূরত্বে থেমে থাকবে。

ইনলাইন দিশা বোঝায়, যেমন আগামী অক্ষরটি বর্তমান অক্ষরের তুলনায় লাইনের কোন দিকে অবস্থান করবে, এটি এমনো ট্যাগ (যেমন <a> এবং <strong> ট্যাগ) যার সাথে CSS display: inline; আছে, টেক্সটের বিন্যাস কীভাবে হয়, উদাহরণস্বরূপ, আরবি নতুন অক্ষরগুলির দিক ডানে থেকে বামে অবস্থান করে, তাই ইনলাইন দিশা ডানে থেকে বামে, এবং ইংরেজি পাতার ইনলাইন দিশা বামে থেকে ডানে।ইনলাইন দিশা CSS বৈশিষ্ট্য দ্বারা পরিবর্তনযোগ্য direction এবং writing-mode সংজ্ঞা

এইভাবে, অবস্থানটি বোঝায়, যখন আপনি রোলটি থেমানোর পর, সাব-এলিমেন্টটি কোন্টেইনারের মধ্যে যে অবস্থানে এসেছে, সেখানেই সামান্য অবস্থান করে থাকে。

ধ্যান দিনএই বৈশিষ্ট্যটি শুধুমাত্র scroll-snap-align বৈশিষ্ট্যটি 'end' হিসাবে রোল হয়েছে তবেলোকেই কাজ করে。

দেখার জন্য scroll-padding-inline-end বৈশিষ্ট্যটির প্রভাব দেখার জন্য, পিতৃত্ব এলাকায় scroll-snap-align বৈশিষ্ট্য scroll-padding-inline-end এবং scroll-snap-type বৈশিষ্ট্য

উদাহরণ

উদাহরণ 1

কনটেনারের শেষপ্রান্ত থেকে সাজানো অবস্থান পর্যন্ত ইনলাইন দিশায় সরবরাহ ফিল্লিং 20px নির্দেশ করুন:

div {
  scroll-padding-inline-end: 20px;
}

আপনার হাতে পরীক্ষা করুন

উদাহরণ 2: ছবি সংকলন

scroll-padding-inline-end এই বৈশিষ্ট্যটি সাজানো ছবি গ্যালারীতে ব্যবহার করা যেতে পারে, যাতে ছবিগুলি স্থায়ী এলাকা থেকে সরে যায়:

#container {
  scroll-padding-inline-end: 30px;
}

আপনার হাতে পরীক্ষা করুন

উদাহরণ 3

যখন কনটেনার এলাকার writing-mode বৈশিষ্ট্যমান 'vertical-rl' হলে, ইনলাইন দিশায় কনটেনার এবং সাবকনটেনারের ভাব ডানদিক থেকে উপরদিকে এবং শেষপ্রান্ত ডানদিক থেকে নীচে সরে যাবে। এটি সরবরাহ এবং scroll-padding-inline-end বৈশিষ্ট্যটি কিভাবে কাজ করে:

#container {
  scroll-padding-inline-end: 20px;
  writing-mode: vertical-rl;
}

আপনার হাতে পরীক্ষা করুন

উদাহরণ 4

যখন কনটেনার এলাকার direction বৈশিষ্ট্যমান 'rtl' হলে, ইনলাইন দিশায় কনটেনার এবং সাবকনটেনারের শেষপ্রান্ত ডানদিক থেকে বাঁদিকে সরে যাবে। এটি সরবরাহ এবং scroll-padding-inline-end বৈশিষ্ট্যটি কিভাবে কাজ করে:

#container {
  scroll-padding-inline-end: 20px;
  direction: rtl;
}

আপনার হাতে পরীক্ষা করুন

CSS গঠনশৈলী

scroll-padding-inline-end: auto|value|initial|inherit;

বৈশিষ্ট্য মান

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

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

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

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

সূত্র:CSS direction প্রতিভা

সূত্র:CSS scroll-snap-align প্রতিশব্দ

সূত্র:CSS scroll-snap-type প্রতিশব্দ

সূত্র:CSS writing-mode অপারেশন