CSS سیکل-پدینگ-بوتوم نمائش

定义和用法

scroll-padding-bottom 属性指定从容器底部到子元素吸附位置的距离。

吸附位置是指当你停止滚动时，子元素在容器中吸附到位的位置。吸附位置通过 scroll-snap-align کیا سی ایس صلاحیت کا سینت کا سی ایس کا مطلب نا بپائیگا، لیکن وسیع سینت کا مطلب نا بپائیگا. مستقل و writing-mode اثر کا。

注意：توجه داشته باشید:

این ویژگی تنها زمانی که موقعیت چسبندگی در پایین عنصر فرزند تنظیم شده باشد، معتبر است. scroll-padding-bottom ویژگی‌ای را که می‌خواهید ببینید، باید در عنصر فرزند تنظیم کنید scroll-snap-align ویژگی، و این ویژگی‌ها را در عنصر والد تنظیم کنید، scroll-padding-bottom و scroll-snap-type ویژگی.

مثال

مثال 1

حاشیه اسکرول از پایین پوشش به موقعیت چسبندگی 20px تنظیم شود:

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

آزمایش کنید

مثال 2: کتابخانه تصاویر

در گالری‌های تصویری با吸附 رفتار، می‌توان از scroll-padding-bottom ویژگی تصویر را به عناصر ثابت بالا می‌برد:

#container {
  scroll-padding-bottom: 30px;
}

آزمایش کنید

مثال 3: تنظیم حاشیه اسکرول پایین

وقتی که吸附 رفتار در دو جهت تنظیم می‌شود، می‌توانید در پوشش نیز scroll-padding-bottom ویژگی. به عناصر بعدی با حرکت عمودی اسکرول کنید تا تأثیر را ببینید:

#container {
  scroll-padding-bottom: 30px;
}

آزمایش کنید

مثال 4: موقعیت چسبندگی

برای اینکه scroll-padding-bottom ویژگی فعال می‌شود و موقعیت چسبندگی باید در پایین عنصر فرزند تنظیم شود. در این مثال،writing-mode ویژگی به موقعیت چسبندگی از پایین عنصر فرزند به سمت چپ تغییر می‌کند. هنگام استفاده از این کد،scroll-padding-bottom ویژگی‌های زیر دیگر کار نمی‌کنند:

#container {
  writing-mode: vertical-rl;
  scroll-padding-bottom: 30px;
}
#container > div {
  scroll-snap-align: end none;
}

آزمایش کنید

آموزش زبان CSS

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

مقدار ویژگی

جزئیات فنی

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه مرورگر اولین هستند که این ویژگی را کامل پشتیبانی می‌کند.

مقالات مرتبط

مراجع:CSS سمت پرزواری

مراجع:CSS سیکل-نپ-الائن نمائش

مراجع:CSS سیکل-نپ-تائپ نمائش

مراجع:CSS writing-mode کا لکھنہ ماڈ