خصائص scroll-margin-block-start CSS
- الصفحة السابقة scroll-margin-block-end
- الصفحة التالية scroll-margin-bottom
تعريف والاستخدام
scroll-margin-block-start تحدد الخاصية المسافة بين موضع التعلق في اتجاه الكتلة والحاوية.
هذا يعني أن عند توقفك عن التمرير، سيتعديل التمرير بسرعة ويقف في موضع التعلق مع الحاوية عند المسافة المحددة.
اتجاه الكتلة هو موضع وضع السطر التالي بالنسبة للسطر الحالي، وهو أيضًا طريقة تنسيق العناصر التي لها CSS display: block; مثل علامات <p> و<div> في تصميم الصفحة. يعتمد اتجاه الكتلة على لغة الكتابة، مثل اللغة المونغولية حيث تكون السطور الجديدة مرتبة من اليسار إلى اليمين، لذا يكون اتجاه الكتلة من اليسار إلى اليمين، بينما يكون اتجاه الكتلة في الصفحات الإنجليزية أفقية. يمكن تحديد اتجاه الكتلة من خلال خصائص CSS writing-mode 定义。
определение.
Позиция吸附а - это положение, в котором элемент吸附ается в контейнере, когда вы останавливаете скольжение.Примечание: scroll-snap-align Этот атрибут действует только в направлении блока.
атрибут установлен в 'start', он начинает действовать. scroll-margin-block-start атрибут для того, чтобы увидеть эффект scroll-margin-block-start и 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-start: 20px;
}
Пример 2
Когда у элемента <div> writing-mode Когда атрибут value установлен в vertical-rl, направление блока будет слева направо. Результатом является перемещение начальной части элемента в правую сторону:
div {
scroll-margin-block-start: 50px;
writing-mode: vertical-rl;
}
CSS грамматика
scroll-margin-block-start: 0|value|initial|inherit;
Значение атрибута
| Значение | Описание |
|---|---|
| 0 | по умолчанию. Значение по умолчанию scroll-margin для элемента. |
| length |
Указать расстояние в px, pt, cm и других единицах измерения. Разрешены отрицательные значения. См. также:وحدات CSS. |
| initial | Установите этот атрибут в его значение по умолчанию. См. также initial. |
| inherit | Этот атрибут наследуется от родительского элемента. См. также inherit. |
Технические детали
| Значение по умолчанию: | 0 |
|---|---|
| Унаследованность: | нет |
| Создание анимации: | Не поддерживается. См. также:Атрибуты анимации. |
| Версия: | CSS3 |
| JavaScript грамматика: | object.style.scrollMarginBlockStart="20px" |
Поддержка браузеров
Числа в таблице представляют собой версию первого браузера, который полностью поддерживает этот атрибут.
| кروм | эдж | файرفокс | сafari | опера |
|---|---|---|---|---|
| 69.0 | 79.0 | 68.0 | 14.1 | 56.0 |
الصفحات ذات الصلة
المرجع:خصائص scroll-snap-align في CSS
المرجع:خصائص scroll-snap-type في CSS
المرجع:خصائص writing-mode CSS
- الصفحة السابقة scroll-margin-block-end
- الصفحة التالية scroll-margin-bottom
