خصائص scroll-margin CSS

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

scroll-margin تحدد الخاصية المسافة بين موقع التثبيت والقارب.

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

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

scroll-margin الخصائص هي اختصارات لخصائص التالي:

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

إذا كان لديzin-margin الخاصية أربع قيم:

scroll-margin: 15px 30px 60px 90px;
  • معدل الارتفاع من الأعلى هو 15px
  • معدل الارتفاع من اليمين هو 30px
  • معدل الارتفاع من الأسفل هو 60px
  • معدل الارتفاع من اليسار هو 90px

إذا كان لديzin-margin الخاصية ثلاثة قيم:

scroll-margin: 15px 30px 60px;
  • معدل الارتفاع من الأعلى هو 15px
  • المسافات في الجانبين هي 30px
  • معدل الارتفاع من الأسفل هو 60px

إذا كان لديzin-margin الخاصية قيمتان:

scroll-margin: 15px 30px;
  • المسافات في الاعلى والأسفل هي 15px
  • المسافات في الجانبين هي 30px

إذا كان هناك قيمة واحدة للخاصية scroll-margin

scroll-margin: 10px;
  • المسافات في جميع الاتجاهات هي 10px

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

ملاحظة:في المثال التالي، تم تعيين الهوامش الخارجية للتصفح في جميع الجوانب، ولكن scroll-snap-align تم تعيين الخاصية إلى "start"، لذا تم تغيير سلوك التمرير فقط في الهوامش العلوية.

مثال

مثال 1

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

div {
  scroll-margin: 20px;
}

تجربة شخصية

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

scroll-margin يمكن استخدام الخاصية في مكتبات الصور التي تُستخدم للإغراء.scroll-margin يُمكن للمستخدم رؤية صورة أخرى في اليسار. يُمكن رؤية التأثير عند التمرير عبر الصورة الأولى:

#container > img {
  scroll-margin: 0 0 0 30px;
}
بكينغ رقص ووهان زنبق هانغتشو

تجربة شخصية

مثال 3: تعيين الهوامش الخارجية للتصفح في الأسفل واليمين

يمكن تعيينها في الأسفل واليمين للعنصر. scroll-margin الخاصية. يمكن رؤية التأثير عند التمرير بحركة أفقي واستوائي إلى العنصر التالي:

#container > div {
  scroll-margin: 0 10px 30px 0;
}





تجربة شخصية

جافا سكربت CSS

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

قيمة الخاصية

القيمة الوصف
0 هوامش التصفح صفر. القيمة الافتراضية.
length

يُحدد بالوحدات px،pt،cm وما إلى ذلك للهوامش الخارجية للتصفح. يُسمح بالقيم السلبية.

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

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

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

دعم المستعرض

الرقم في الجدول يعكس إصدار المستعرض الذي يدعم الخاصية لأول مرة.

Chrome Edge Firefox Safari Opera
69.0 79.0 90.0 14.1 56.0

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

مرجع:خصائص scroll-margin-bottom في CSS

مرجع:خصائص scroll-margin-left في CSS

مرجع:خصائص scroll-margin-right في CSS

مرجع:خصائص scroll-margin-top في CSS

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

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