خصائص scroll-padding-inline-start CSS

تعريف وطرق الاستخدام

scroll-padding-inline-start الخاصية تحدد المسافة من بداية الحاوية إلى موقع الالتصاق للعنصر الأبناء في اتجاه السطر.

هذا يعني أن التمرير سيتحرك بسرعة ويوقف التمرير عند المسافة المحددة بين موقع الالتصاق والحاوية.

اتجاه السطر هو اتجاه وضع النص التالي بالنسبة للنص الحالي في السطر، وهو أيضًا طريقة ترتيب العناصر التي لها CSS display: inline; (مثل علامات <a> و <strong>) في النص. يعتمد اتجاه السطر على لغة الكتابة، مثل أن تكون الحروف الجديدة في اللغة العربية مرتبة من اليمين إلى اليسار، لذا يكون اتجاه السطر من اليمين إلى اليسار، بينما يكون اتجاه السطر في صفحة الإنجليزية من اليسار إلى اليمين. يمكن تحديد اتجاه السطر باستخدام خاصية CSS direction و writing-mode تعريف.

موقع الالتصاق هو الموقع الذي يتم فيه جذب عنصر الأبناء إلى مكانه في الحاوية عند توقف التمرير.

ملاحظة:هذه الخاصية تُستخدم فقط في اتجاه السطر scroll-snap-align عندما يكون خاصية 'start' فحسب.

لرؤية scroll-padding-inline-start الخاصية على الأبناء لرؤية تأثيرها scroll-snap-align الخاصية، ويجب إعدادها في العنصر الأب scroll-padding-inline-start و scroll-snap-type الخصائص.

مثال

مثال 1

إعداد الهوامش الداخلية للتحرك من موقع البداية للصندوق إلى موقع الالتصاق في الصف العمودي إلى 20px:

div {
  scroll-padding-inline-start: 20px;
}

جرب بنفسك

مثال 2: مكتبة الصور

scroll-padding-inline-start يمكن استخدام الخاصية في صور галيري مع سلوك الالتصاق لسحب الصور من خلف العناصر الثابتة:

#container {
  scroll-padding-inline-start: 30px;
}

جرب بنفسك

مثال 3

عندما يكون عنصر الصندوق writing-mode عندما يتم تعيين قيمة الخاصية إلى 'vertical-rl'، يتحرك موقع البداية للعناصر داخل الصف العمودي من الأعلى إلى اليمين. هذا يؤثر على سلوك الالتصاق في اللف. scroll-padding-inline-start طريقة عمل الخاصية:

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

جرب بنفسك

مثال 4

عندما يكون عنصر الصندوق direction عندما يتم تعيين قيمة الخاصية إلى 'rtl'، يتحرك موقع البداية للعناصر داخل الصف العمودي من اليمين إلى اليسار، والموقع النهائي للعناصر من اليمين إلى الأسفل. هذا يؤثر على سلوك الالتصاق في اللف. scroll-padding-inline طريقة عمل الخاصية:

#container {
  scroll-padding-inline-start: 20px;
  diretion: rtl;
}

جرب بنفسك

صيغة CSS

scroll-padding-inline-start: auto|value|initial|inherit;

قيمة الخاصية

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

دعم المتصفح

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

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

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

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

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

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