خصائص scroll-padding-inline CSS

定义和用法

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

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

行内方向是指相对于一行中现有字符的位置，下一个字符被放置的方向。这也是具有 CSS display: inline; 的标签（如 <a> 和 <strong> 标签）在文本中的布局方式。行内方向取决于书写语言，例如阿拉伯语的新字符从右到左排列，使得行内方向为从右到左，而英语页面则具有从左到右的行内方向。行内方向可以通过 CSS 属性 direction و writing-mode 来定义。

吸附位置是指当你停止滚动时，子元素在容器中吸附到位的位置。

注意：此属性仅在行内方向上，scroll-padding-align 属性设置为 'start' 或 'end' 时才有效。

scroll-padding-inline 属性是以下属性的简写属性：

• scroll-padding-inline-start
• scroll-padding-inline-end

scroll-padding-inline 属性的值可以通过不同方式设置：

如果 scroll-padding-inline 属性有两个值：

scroll-padding-inline: 10px 50px;

• 开始处的距离为 10px
• 结束处的距离为 50px

如果 scroll-padding-inline 属性有一个值：

scroll-padding-inline: 10px;

• 开始处和结束处的距离均为 10px

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

CSS 的 scroll-padding-block و scroll-padding-inline 属性与 CSS 属性 خصائص scroll-padding-top CSS、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;

قيمة الخاصية

تفاصيل التقنية

دعم المتصفح

الرقم في الجدول يمثل إصدار المتصفح الذي يدعم هذه الخاصية بشكل كامل.

صفحات ذات الصلة

المرجع:خصائص direction CSS

المرجع:خصائص scroll-snap-align CSS

المرجع:خصائص scroll-snap-type CSS

المرجع:خصائص writing-mode في CSS