خصائص scroll-padding-inline-end في CSS

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

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

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

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

موقع التوجيه هو الموقع الذي يصل إليه العنصر الفرعي في العنصر الأم بعد توقف التمرير،

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

لرؤية scroll-padding-inline-end في العنصر الأم، وتعيين الخاصية scroll-snap-align الخاصية، ويجب تعيين الخاصية scroll-padding-inline-end و scroll-snap-type الخاصية.

مثال

مثال 1

ضبط مسافة السحب الداخلية للاتجاه الداخلي من نهاية العنصر إلى موقع التوجيه 20px:

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

تجربة شخصية

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

scroll-padding-inline-end يمكن استخدام الخاصية في صالة العرض التي تحتوي على سلوك التوجيه لتسليط الضوء على الصور من العنصر الثابت:

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

تجربة شخصية

مثال 3

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

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

تجربة شخصية

مثال 4

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

#container {
  scroll-padding-inline-end: 20px;
  direction: rtl;
}

تجربة شخصية

جملة CSS

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

قيمة الخاصية

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

دعم المتصفح

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

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

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

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

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

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