CSS scroll-padding-block ɗanin

تعریف و استفاده

scroll-padding-block ویژگی فاصله بین محفظه و موقعیت چسبندگی عناصر فرزند در جهت بلوک را مشخص می‌کند.

این به این معناست که، وقتی شما رول را متوقف می‌کنید، رول به سرعت تنظیم می‌شود و در فاصله مشخص شده بین موقعیت چسبندگی و محفظه در جهت بلوک متوقف می‌شود.

جهت بلوک به معنای قرار دادن سطر بعدی در مقایسه با موقعیت سطر فعلی است، این نیز روش قرارگیری برچسب‌هایی با CSS display: block; مانند برچسب‌های <p> و <div> در صفحه است. جهت بلوک بستگی به زبان نوشتاری دارد، به عنوان مثال، در زبان مغولی سطرهای جدید از چپ به راست قرار می‌گیرند، بنابراین جهت بلوک نیز از چپ به راست است، در حالی که صفحه‌های انگلیسی دارای جهت بلوک به سمت پایین دارند. جهت بلوک می‌تواند از طریق ویژگی CSS تنظیم شود: writing-mode تعریف می‌شود.

موقعیت چسبندگی به موقعیتی اطلاق می‌شود که وقتی شما رول را متوقف می‌کنید، عناصر فرزند در محفظه به موقعیت چسبندگی می‌رسند.

توجه داشته باشید:این ویژگی تنها در جهت بلوک،scroll-snap-align ویژگی هنگامی که به 'start' یا 'end' تنظیم شود، معتبر است.

scroll-padding-block ویژگی کوتاه شده‌ای برای ویژگی‌های زیر است:

• scroll-padding-block-start
• scroll-padding-block-end

scroll-padding-block مقدار ویژگی می‌تواند به روش‌های مختلف تنظیم شود:

اگر scroll-padding-block ویژگی دو مقدار داشته باشد:

scroll-padding-block: 10px 50px;

• فاصله شروع 10px است
• فاصله پایان 50px است

اگر scroll-padding-block ویژگی یک مقدار داشته باشد:

scroll-padding-block: 10px;

• فاصله شروع و پایان 10px است

باید ببینید scroll-padding-block فعالیت ویژگی، باید در عناصر فرزند تنظیم شود scroll-snap-align 属性，并在父元素上设置 scroll-padding-block 和 scroll-snap-type 属性。

CSS 的 scroll-padding-block 和 scroll-padding-inline 属性与 CSS 属性 CSS scroll-padding-top ɗanin、scroll-padding-bottom、scroll-padding-left 和 scroll-padding-right 非常相似，但 scroll-padding-block 和 scroll-padding-inline 属性依赖于块方向和行内方向。

实例

例子 1

在块方向上，将滚动内边距设置为从容器到吸附位置的 20px：

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

Duba shi aiki

例子 2：图片库

scroll-padding-block 属性可以用于具有吸附行为的图片画廊，以将图片推到固定元素下方：

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

Duba shi aiki

例子 3

当容器元素的 writing-mode 属性值设置为 vertical-rl 时，块方向上容器和子元素的起始位置从顶部移动到右侧，结束位置从底部移动到左侧。这会影响滚动吸附行为以及 scroll-padding-block Rumfunin halin:

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

Duba shi aiki

Kanamu CSS

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

Kiyas na halin

Turbu Teknoloji

Tasirin browser

Tasirin da cikakken fagen suna dona ce ta ce kewayen karensa na browser da amince suka cikarwa.

相关页面

参考：CSS scroll-padding-block-end ɗanin

参考：CSS scroll-padding-block-start ɗanin

参考：CSS scroll-snap-align ɗanin

参考：CSS scroll-snap-type ɗanin

参考：هاوسا CSS writing-mode اتوبيتي