Atrybut scroll-margin-block w CSS

Definicja i zastosowanie

scroll-margin-block Atrybut określa odległość między pozycją przyciągania (snap position) a kontenerem w kierunku blokowym.

Oznacza to, że gdy zatrzymujesz przewijanie, przewijanie szybko dostosowuje się i zatrzymuje w odległości określonej między pozycją przyciągania w kierunku blokowym a kontenerem.

Kierunek blokowy to kierunek umieszczania następnego wiersza w stosunku do bieżącej pozycji wiersza, co jest również sposobem布局方式 dla etykiet z CSS display: block; (np. <p> i <div> etykiety) na stronie. Kierunek blokowy zależy od języka pisma, na przykład, nowa linia mongolska jest ustawiona od lewej do prawej, więc kierunek blokowy również jest od lewej do prawej, podczas gdy kierunek blokowy strony angielskiej jest w dół. Kierunek blokowy można ustawić za pomocą atrybutu CSS writing-mode zdefiniować.

Pozycja przyciągania to pozycja, w której podelement przyciąga się do miejsca w kontenerze, gdy zatrzymujesz przewijanie.

Uwaga:Ten atrybut jest dostępny tylko w kierunku blokowym scroll-snap-align Działa, gdy wartość atrybutu jest ustawiona na 'start' lub 'end'.

• scroll-margin-block-start
• scroll-margin-block-end

scroll-margin-block Wartość atrybutu można ustawić na różne sposoby:

Jeśli atrybut scroll-margin-block ma dwie wartości:

scroll-margin-block: 10px 50px;

• Odległość od początku wynosi 10px
• Odległość od końca wynosi 50px

Jeśli atrybut scroll-margin-block ma wartość:

scroll-margin-block: 10px;

• Odległość od początku i końca wynosi 10px

Aby zobaczyć scroll-margin-block Atrybut efektu, musi być ustawiony na elemencie potomnym scroll-margin-block i scroll-snap-align Atrybut, ustawiony na elemencie nadrzędnym scroll-snap-type Atrybuty.

CSS scroll-margin-inline i scroll-margin-block Atrybuty są podobne do atrybutów CSS Atrybut scroll-margin-top w CSS,scroll-margin-bottom,scroll-margin-left i scroll-margin-right jest bardzo podobny, ale scroll-margin-block i scroll-margin-inline Atrybut zależy od kierunku blokowego i kierunku wewnętrznego.

Przykład

Przykład 1

Ustaw odległość między pozycją przyciągania w kierunku blokowym a kontenerem przewijalnym:

div {
  scroll-margin-block: 10px;
}

Spróbuj sam

Przykład 2

Kiedy element potomny writing-mode Kiedy wartość atrybutu ustawiona jest na vertical-rl, początkowa pozycja elementu w kierunku blokowym przenosi się z góry na prawo, a końcowa pozycja z dołu na lewo. To wpływa na zachowanie przyciągania do krawędzi oraz scroll-margin-block Sposób działania atrybutu:

div {
  scroll-margin-block: 20px 0;
  writing-mode: vertical-rl;
}

Spróbuj sam

Gramatyka CSS

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

Wartość atrybutu

Szczegóły techniczne

Wsparcie przeglądarki

Tabela zawiera wersje przeglądarek, które w pełni wspierają tę właściwość.

Strony związane

Odnośnik:Atrybut scroll-margin-block-end w CSS

Odnośnik:Atrybut scroll-margin-block-start w CSS

Odnośnik:Atrybut scroll-snap-align w CSS

Odnośnik:Atrybut scroll-snap-type w CSS

Odnośnik:Atrybut writing-mode w CSS