خصائص scroll-margin-inline-end CSS

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

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

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

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

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

ملاحظة:النص scroll-margin-inline-end هذا الخصائص يعتمد فقط على الاتجاه الداخلي.

الخصائص تكون 'end' لتكون فعالة. الخصائص لتشديد تأثيرها، ويجب تعيينها في العنصر الفرعي لرؤية الخصائص لتشديد تأثيرها، ويجب تعيينها في العنصر الفرعي scroll-margin-block scroll-margin-inline-end scroll-snap-align الخصائص، وفي العنصر الأب، يجب تعيين scroll-snap-type

خصائص scroll-margin-inline scroll-margin-block مثل خصائص CSS، خصائص scroll-margin-top CSSscroll-margin-bottomالخصائص مشابهة تماماً لخصائص CSS،scroll-margin-bottom، scroll-margin-block scroll-margin-left scroll-margin-right مثل scroll-margin-block scroll-margin-inline و

الخصائص تعتمد على اتجاه البلاك والاتجاه الداخلي.

مثال

مثال 1

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

تجربة شخصية

تحديد المسافة من موقع اللصق إلى العنصر القابل للتمدد:

عندما يكون <div> عنصراً، مثال 2 writing-mode

div {
  scroll-margin-inline-end: 20px;
  عندما يتم تعيين قيمة الخاصية vertical-rl، يصبح الاتجاه الداخلي من الأسفل إلى الأعلى. النتيجة هي انتقال نهاية العنصر من اليمين إلى الأسفل:
}

تجربة شخصية

مثال 3

عندما يكون <div> عنصراً، direction عندما يتم تعيين قيمة الخاصية rtl، يصبح الاتجاه الداخلي من اليمين إلى اليسار. النتيجة هي انتقال نهاية العنصر من اليمين إلى اليسار:

div {
  scroll-margin-inline-end: 20px;
  direction: rtl;
}

تجربة شخصية

جافا سكربت:

scroll-margin-inline-end: 0|value|initial|inherit;

قيمة الخاصية

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

دعم المتصفح

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

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

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

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

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

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