CSS scroll-padding-inline-start অপারেটর

定义和用法

scroll-padding-inline-start 属性指定了在行内方向上从容器起始位置到子元素吸附位置的距离。

这意味着，当你停止滚动时，滚动会快速调整并停止在吸附位置与容器之间指定的距离处。

行内方向是指下一字符相对于现有字符在行中的位置放置的方向，这也是具有 CSS display: inline; 的标签（如 和 标签）在文本中的布局方式。行内方向取决于书写语言，例如阿拉伯语的新字符是从右到左排列的，因此行内方向是从右到左的，而英文页面的行内方向是从左到右的。行内方向可以通过 CSS 属性 direction এবং writing-mode সংজ্ঞা

আটস্রোত্রী স্থান বলতে বোঝায় যে, আপনি স্ক্রোল করে থাকলে, সাবঘটক কোনো থাকা স্থানে আটস্রোত্রী হয়

দৃষ্টান্ত:এই অবস্থায় শুধুমাত্র সার্ভিস দিকে সেট করা হয় scroll-snap-align অবস্থায় যখনই কার্যকর হয়

দেখার জন্য scroll-padding-inline-start অবস্থায় সেট করা হয় scroll-snap-align অবস্থায় সেট করা হয় scroll-padding-inline-start এবং scroll-snap-type বৈশিষ্ট্য

উদাহরণ

উদাহরণ 1

কনটেনার থেকে স্থায়ী এলিমেন্টের পর্যন্ত লাইন ইনলাইন দিকের স্ক্রোল প্যাডিংকে 20px নির্দেশ করুন:

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

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

উদাহরণ 2: চিত্র সংগ্রহ

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

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

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

উদাহরণ 3

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

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

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

উদাহরণ 4

যখন কনটেনার এলিমেন্টের direction বৈশিষ্ট্য মান 'rtl' হলে, লাইন ইনলাইন দিকের কনটেনার ও সাব-এলিমেন্টগুলির ভার শুরুতে ডানদিকে থেকে বামদিকে চলে যায়, এবং শেষতে ডানদিকে থেকে নীচে চলে যায়, যা স্ক্রোল অ্যাট্র্যাকশন এবং scroll-padding-inline বৈশিষ্ট্যটির কাজকর্ম:

#container {
  scroll-padding-inline-start: 20px;
  diretion: rtl;
}

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

CSS গঠনশৈলী

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

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

মান বর্ণনা
auto ডিফল্ট মান। ব্রাউজার প্রস্তুত করে নেয় প্রস্তুত প্যাডিং。
length

px, pt, cm ইত্যাদি ইউনিটে scroll-padding-inline-start নির্দেশ করা হয়。

নেতিবাচক মান ব্যবহার করা হবে না। দেখুন:CSS ইউনিট。
% এই বৈশিষ্ট্যটিকে অন্তর্ভুক্ত এলিমেন্টের প্রশস্ততার প্রতিশতে নির্দেশ করা হয়。
initial এই বৈশিষ্ট্যটিকে এক্সট্রার মানে সমায়োজিত করুন। দেখুন: initial。
inherit এই বৈশিষ্ট্যটি তার পিতৃত্ব এলিমেন্ট থেকে উত্তরণ করে। দেখুন: inherit。

টেকনিক্যাল বিবরণ

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

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

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 15.0 56.0

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

প্রতিরূপ:CSS ডাইরেকশন এট্রিবিউট

প্রতিরূপ:CSS scroll-snap-align অপারেটর

প্রতিরূপ:CSS scroll-snap-type অপারেটর

প্রতিরূপ:CSS writing-mode প্রতিভাত্ত্ব ওয়ারিটিং-মোড