هوک CSS scroll-padding-inline

定义和用法

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 属性 هوک 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;

قيمة الخاصية

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

دعم المتصفح

الرقم في الجدول يمثل إصدار المتصفح الذي يدعم الخاصية الأولى.

الصفحة المطلوبة

Reference:ແສງການແລ່ນທາງ CSS

Reference:هوک CSS scroll-snap-align

Reference:هوک CSS scroll-snap-type

Reference:属性 writing-mode CSS