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

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

scroll-margin-inline-start تحدد الخاصية المسافة بين موقع التمسك والمجوعة في الاتجاه الداخلي.

这意味着، عند توقفك عن التمرير، سيتعديل التمرير بسرعة، ويكون المكان الذي يبدأ فيه العنصر الديناميكي بين المكان الذي يتم فيه التمسك بالمجوعة والمكان الذي يتم فيه التمسك بالعنصر الديناميكي في نفس الاتجاه الداخلي، عند المسافة المحددة.

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

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

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

خصائص CSS scroll-margin-inline و scroll-margin-block الخصائص مع خاصية خصائص scroll-margin-top CSSوscroll-margin-bottomوscroll-margin-left و scroll-margin-right مثلها في الشكل، لكن scroll-margin-block و scroll-margin-inline يعتمد الخاصية على اتجاه البлок والاتجاه السطرى.

مثال

مثال 1

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

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

جرب بنفسك

مثال 2

عندما يتم تعيين الخاصية writing-mode عندما يتم تعيين قيمة الخاصية إلى vertical-rl، يصبح اتجاه السطر أفقياً. النتيجة هي تحريك موقع البداية للعنصر من اليسار إلى أعلى:

div {
  scroll-margin-inline-start: 20px;
  writing-mode: vertical-rl;
}

جرب بنفسك

مثال 3

عندما يتم تعيين الخاصية اتجاه عندما يتم تعيين قيمة الخاصية إلى rtl، يصبح اتجاه السطر من اليمين إلى اليسار. النتيجة هي تعديل موقع البداية للعنصر من اليسار (على الرغم من أن البداية الفعلية تكون في اليمين، إلا أن اليسار هنا يشير إلى اليسار الافتراضي (ltr) اليسار)

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

جرب بنفسك

جملة CSS

inset-inline-start: 0|قيمة|مبدئي|توريث;

قيمة الخاصية

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

دعم المتصفح

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

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

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

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

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

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