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

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

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

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

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

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

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

العنصر scroll-padding-block-end العنصر، لرؤية scroll-snap-align العنصر، ويجب تعيين الخاصية scroll-padding-block-end و scroll-snap-type الخاصية.

مثال

مثال 1

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

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

جرب بنفسك

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

في معرض الصور الذي يحتوي على سلوك الالتصاق، يمكن استخدام scroll-padding-block-end العنصر سيدفع الصورة إلى أعلى العنصر الثابت:

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

جرب بنفسك

مثال 3

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

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

جرب بنفسك

جملة CSS

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

قيمة الخاصية

القيمة الوصف
auto القيمة الافتراضية. يحسب المتصفح الهوامش الداخلية.
length

حدد scroll-padding-block-end بأحد وحدات القياس مثل px،pt،cm إلخ.

لا يسمح بالقيم السلبية. انظر:وحدات CSS.
% حدد الهوامش الداخلية بال百分比 من عرض العنصر.
initial ضع هذا الخاصية على قيمتها الافتراضية. انظر: initial.
inherit يرث هذا الخاصية من عنصر الأب. انظر: inherit.

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

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

دعم المتصفح

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 15.0 56.0

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

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

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

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