خصائص scroll-padding-block في CSS

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

scroll-padding-block تحدد الخاصية المسافة من الحاوية إلى موقع اللصق للعنصر الفرعي في اتجاه البلك.

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

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

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

ملاحظة:هذه الخاصية تعمل فقط في اتجاه البлок،scroll-snap-align فعال عند إعداد الخاصية إلى 'start' أو 'end'.

scroll-padding-block الخصائص هي اختصارات للخصائص التالية:

• scroll-padding-block-start
• scroll-padding-block-end

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

إذا كان لديك قيمتين لـ scroll-padding-block

scroll-padding-block: 10px 50px;

• المسافة من البداية 10px
• المسافة من النهاية 50px

إذا كان لديك قيمة واحدة لـ scroll-padding-block

scroll-padding-block: 10px;

• المسافة من البداية والنهاية 10px

لرؤية scroll-padding-block تأثير الخاصية يجب إعداده على العنصر الفرعي scroll-snap-align scroll-snap-align scroll-padding-block وشبيهة، لكن خصائص، ويتم تعيينها في العنصر الأب scroll-snap-type

خصائص scroll-padding-block وشبيهة، لكن scroll-padding-inline خصائص CSS خصائص scroll-padding-top في CSSscroll-padding-bottomخصائص تتناسب مع خاصيةscroll-padding-bottom، وشبيهة، لكن scroll-padding-left scroll-padding-right scroll-padding-block وشبيهة، لكن scroll-padding-inline يعتمد الخاصية على اتجاه السلسلة والاتجاه الافتراضي.

مثال

مثال 1

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

div {
  scroll-padding-block: 20px;
}

تجربة شخصية

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

scroll-padding-block يمكن استخدام الخاصية لصور الالمجلة التي تحتوي على سلوك التثبيت لسحب الصور تحت العنصر الثابت:

#container {
  scroll-padding-block: 30px 0;
}

تجربة شخصية

مثال 3

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

#container {
  scroll-padding-block: 20px 0;
  writing-mode: vertical-rl;
}

تجربة شخصية

جملة CSS

scroll-padding-block: auto|value|initial|inherit;

قيمة الخاصية

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

دعم المتصفح

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

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

المرجع:خصائص scroll-padding-block-end في CSS

المرجع:خصائص scroll-padding-block-start في CSS

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

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

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