خصائص CSS scroll-margin-block

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

scroll-margin-block تحدد الخاصية المسافة بين موقع التثبيت (snap position) والصندوق في اتجاه الكتلة.

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

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

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

ملاحظة:تتوفر الخاصية فقط في اتجاه الكتلة: الخاصية في العنصر الأم، ويجب ضبط الخاصية تكون الخاصية فعالة عند تعيينها إلى 'start' أو 'end'.

scroll-margin-block الخاصية هي اختصار لأحد الخاصيات التالية:

scroll-margin-block يمكن تعيين قيمة الخاصية بطرق مختلفة:

إذا كان لدينك شرط scroll-margin-block قيمتين:

scroll-margin-block: 10px 50px;
  • scroll-margin-block: 10px 50px;
  • المسافة من البداية هي 10px

المسافة من النهاية هي 50px

scroll-margin-block: 10px;
  • إذا كان لديك قيمة للخاصية scroll-margin-block:

المسافة من البداية والنهاية هي 10px scroll-margin-block لرؤية scroll-margin-block مثل الخاصية في العنصر الأم، ويجب ضبط الخاصية 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-left scroll-margin-right scroll-margin-block مثل scroll-margin-inline الخاصية تعتمد على اتجاه البلوك والاتجاه الداخلي.

مثال

مثال 1

ضبط المسافة بين موقع الالتصاق في اتجاه البلوك والمحتويات القابلة للتمدد:

div {
  scroll-margin-block: 10px;
}

جرب بنفسك

مثال 2

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

div {
  scroll-margin-block: 20px 0;
  writing-mode: vertical-rl;
}

جرب بنفسك

جافا سكربت:

scroll-margin-block: 0|value|initial|inherit;

قيمة الخاصية

القيمة الوصف
0 افتراضي. القيمة الافتراضية لscroll-margin-block للعنصر.
length

يحدد المسافة باستخدام وحدات مثل px،pt،cm،وغيرها. يسمح بالقيم السلبية.

يرجى الرجوع إلى:وحدات CSS.
initial ضبط هذا الخاصية إلى قيمتها الافتراضية. يرجى الرجوع إلى initial.
inherit ينتقل هذا الخاصية من عنصر الأب إلى هذا الخاصية. يرجى الرجوع إلى inherit.

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

القيمة الافتراضية: 0
الوراثة: لا
صنع التحرك: غير مدعوم. يرجى الرجوع إلى:خصائص التحرك.
الإصدار: CSS3
جافا سكربت: object.style.scrollMarginBlock="20px"

دعم المتصفح

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

الخميس الجسر الفاكس السفاري الأوبرا
69.0 79.0 68.0 14.1 56.0

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

المرجع:خصائص CSS scroll-margin-block-end

المرجع:خصائص CSS scroll-margin-block-start

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

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

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