خصائص scroll-margin-block-end CSS

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

scroll-margin-block-end تحديد المسافة بين موقف التوجيه والمحيط.

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

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

позиция吸附а - это положение, в котором элемент吸附ается в контейнере, когда вы останавливаете скроллинг.

注意:этот атрибут действует только в направлении блока. scroll-snap-align эффект этого свойства будет активен.

свойство установлено на 'end', scroll-margin-block-end свойство, и для того чтобы увидеть эффект scroll-margin-block-end и scroll-snap-align свойство, и устанавливается на родительском элементе scroll-snap-type свойствам.

CSS scroll-margin-inline и scroll-margin-block атрибуты соответствуют свойствам CSS خصائص scroll-margin-top في CSS,scroll-margin-bottom,scroll-margin-left и scroll-margin-right очень похожи, но scroll-margin-block и scroll-margin-inline атрибут зависит от направления блока и направления строки.

пример

пример 1

в направлении блока, положение выравнивания и внешняя отступная маржа контейнера устанавливаются в 20px:

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

попробуйте сами

пример 2

когда у элемента <div> writing-mode при установке атрибута value на vertical-rl, направление блока будет слева направо. Результатом будет перемещение конца элемента из нижней части влево:

div {
  scroll-margin-block-end: 50px;
  writing-mode: vertical-rl;
}

попробуйте сами

CSS синтаксис

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

значение атрибута

технические детали

поддержка браузеров

числа в таблице показывают версию первого браузера, который полностью поддерживает этот атрибут.

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

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

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

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