CSS scroll-padding-inline অপারেশন

定义和用法

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

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

行内方向是指相对于一行中现有字符的位置，下一个字符被放置的方向。这也是具有 CSS display: inline; 的标签（如 和 标签）在文本中的布局方式。行内方向取决于书写语言，例如阿拉伯语的新字符从右到左排列，使得行内方向为从右到左，而英语页面则具有从左到右的行内方向。行内方向可以通过 CSS 属性 direction এবং writing-mode এটি লাইনের দিকটিকে বুঝায়, যা একটি লাইনের মধ্যে বর্তমান অক্ষরের সম্পর্কে, পরবর্তী অক্ষরটি দিকে পরিবর্তন করার দিক

উল্লেখ্য:

আটস্থানকারী স্থানটি এটি বুঝায় যে, আপনি সরবরাহ করলে, সাব-ইলেকট্রনটি কান্টেনারের মধ্যে আটস্থানকারী স্থানে আটকে যাবেনোট:scroll-snap-align এই প্রতিভা শুধুমাত্র লাইনের দিকে

যখন 'start' বা 'end' হলে প্রযোজ্য

scroll-padding-inline scroll-padding-inline-start

প্রতিভার মানটি বিভিন্ন পদ্ধতিতে সেট করা যেতে পারে:

যদি scroll-padding-inline প্রতিভার দুটি মান থাকে:
  • scroll-padding-inline: 10px 50px;
  • শুরুর দূরত্ব 10px

শেষের দূরত্ব 50px

যদি scroll-padding-inline প্রতিভার একটি মান থাকে:
  • scroll-padding-inline: 10px;

শুরু এবং শেষের দূরত্বকে 10px করা হয় scroll-padding-inline প্রতিভা সেট করা হয়, সুদেশ্য দেখার জন্য scroll-snap-align প্রতিভা, এবং পিতৃ ইলেকট্রনে সেট করা হয় scroll-padding-inline এবং scroll-snap-type প্রতিভা。

CSS-র scroll-padding-block এবং scroll-padding-inline প্রতিভা এবং CSS প্রতিভা CSS scroll-padding-top অপারেশন、scroll-padding-bottom、scroll-padding-left এবং scroll-padding-right অত্যন্ত সমান, কিন্তু scroll-padding-block এবং scroll-padding-inline বৈশিষ্ট্যটি ব্লক দিক এবং লাইনার দিকের উপর নির্ভর করে。

উদাহরণ

উদাহরণ 1

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

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

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

উদাহরণ 2: ছবি কলেকশন

আটকানোর আচরণ সম্পন্ন ছবি গ্যালারিতে, scroll-padding-inline বৈশিষ্ট্যটি ছবিটিকে স্থির ইলিমেন্ট থেকে বের করে নিয়ে যাবে:

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

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

উদাহরণ 3

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

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

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

উদাহরণ 4

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

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

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

CSS গঠনশৈলী

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

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

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

px, pt, cm ইত্যাদি ইউনিটে scroll-padding-inline নির্দিষ্ট করুন。

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

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

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

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

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

চ্রোম এজ ফায়ারফক্স স্যাফারি ওপেরা
69.0 79.0 68.0 15.0 56.0

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

উল্লেখ:CSS দিশা প্রতিশব্দ

উল্লেখ:CSS scroll-snap-align অপারেশন

উল্লেখ:CSS scroll-snap-type অপারেশন

উল্লেখ:CSS writing-mode অতিভূত গুণ