CSS scroll-margin-block প্রক্রিয়া

定义和用法

scroll-margin-block 属性指定在块方向上，吸附位置（snap position）与容器之间的距离。

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

块方向是指相对于现有行位置放置下一行的方向，这也是具有 CSS display: block; 的标签（如

和

标签）在页面上的布局方式。块方向取决于书写语言，例如，蒙古语的新行从左到右排列，因此块方向也是从左到右，而英文页面的块方向是向下。块方向可以通过 CSS 属性 writing-mode পরিভাষিত হয়。

স্ন্যাপ স্থান বলতে বোঝায়, যখন আপনি সরল করবেন, সাব-এলিমেন্টটি কোন্টেনারের মধ্যে স্ন্যাপ হওয়ার স্থান

দৃষ্টান্ত:এই এক্সপ্রোপ্রিয়টি কেবলমাত্র ব্লক দিশায় scroll-snap-align এই এক্সপ্রোপ্রিয়টি 'start' বা 'end' হলে কার্যকর

scroll-margin-block এই এক্সপ্রোপ্রিয়টি নিম্নলিখিত এক্সপ্রোপ্রিয়টির সংক্ষিপ্ত রূপ:

scroll-margin-block এই এক্সপ্রোপ্রিয়টির মানগুলি বিভিন্ন পদ্ধতিতে সংজ্ঞায়িত করা যায়:

যদি scroll-margin-block এক্সপ্রোপ্রিয়টির দুটি মান থাকে:

scroll-margin-block: 10px 50px;
  • 开始处的距离为 10px
  • 结束处的距离为 50px

如果 scroll-margin-block 属性有一个值：

scroll-margin-block: 10px;
  • 开始处和结束处的距离均为 10px

要看到 scroll-margin-block 属性的效果，必须在子元素上设置 scroll-margin-block 和 scroll-snap-align 属性，并在父元素上设置 scroll-snap-type 属性。

CSS 的 scroll-margin-inline 和 scroll-margin-block 属性与 CSS 属性 CSS scroll-margin-top অপারেশন、scroll-margin-bottom、scroll-margin-left 和 scroll-margin-right 非常相似，但 scroll-margin-block 和 scroll-margin-inline 属性依赖于块方向和行内方向。

实例

例子 1

设置块方向上吸附位置与可滚动容器之间的距离：

div {
  scroll-margin-block: 10px;
}

আপনার হাতে করুন

例子 2

当子元素的 writing-mode 属性值设置为 vertical-rl 时，元素在块方向的起始位置从顶部移动到右侧，结束位置从底部移动到左侧。这会影响滚动吸附行为以及 scroll-margin-block বৈশিষ্ট্যের কাজকর্ম:

div {
  scroll-margin-block: 20px 0;
  writing-mode: vertical-rl;
}

আপনার হাতে করুন

CSS গঠনশৈলী

scroll-margin-block: 0|value|initial|inherit;

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

মান বর্ণনা
0 ডিফল্ট। এলিমেন্টের ডিফল্ট scroll-margin-block মান
length

px, pt, cm ইত্যাদির ইউনিটে দূরত্ব সংজ্ঞায়িত করুন। নেতিবাচক মানগুলোকে অনুমতি দেওয়া হয়。

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

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

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

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

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

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

সংশ্লিষ্ট পৃষ্ঠাCSS scroll-margin-block-end প্রক্রিয়া

সংশ্লিষ্ট পৃষ্ঠাCSS scroll-margin-block-start প্রক্রিয়া

সংশ্লিষ্ট পৃষ্ঠাCSS scroll-snap-align অপারেশন

সংশ্লিষ্ট পৃষ্ঠাCSS scroll-snap-type অপারেশন

সংশ্লিষ্ট পৃষ্ঠাCSS writing-mode এটি একটি প্রতিভাগত এটি