CSS atrybut scroll-margin-block-start

Definicja i użycie

scroll-margin-block-start Atrybut określa odległość między miejscem przyciągania się a kontenerem w kierunku blokowym.

Oznacza to, że po zatrzymaniu przewijania, przewijanie szybko dostosowuje się i zatrzymuje w miejscu przyciągania się elementów potomnych w kierunku blokowym do określonej odległości od kontenera.

Kierunek blokowy oznacza pozycję umieszczenia następnego wiersza w stosunku do istniejącego wiersza, co jest również sposobem układu na stronie etykiet z CSS display: block; (takich jak etykiety <p> i <div>), w którym układ jest realizowany. Kierunek blokowy zależy od języka pisma, na przykład w języku mongolskim nowa linia jest ustawiona od lewej do prawej, więc kierunek blokowy jest od lewej do prawej, podczas gdy w przypadku stron angielskich kierunek blokowy jest pionowy. Kierunek blokowy można określić za pomocą atrybutu CSS writing-mode Definicja.

Definicja.

Pozycja przyciągania to pozycja, w której element potomny przyciąga się do pozycji w kontenerze, gdy zatrzymujesz przewijanie.Uwaga: scroll-snap-align Atrybut działa tylko w kierunku blokowym

aby działał. scroll-margin-block-start Aby zobaczyć efekt właściwości, musi być ustawiony na elementie potomnym scroll-margin-block-start i scroll-snap-align Atrybut, ustawiony na elementie 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 są bardzo podobne, ale scroll-margin-block i scroll-margin-inline Atrybut zależy od kierunku blokowego i kierunku wewnętrznego.

Przykład

Przykład 1

W kierunku blokowym, ustawia pozycję wyrównania z kontenerem na odległość 20px:

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

Spróbuj sam

Przykład 2

Kiedy element <div> ma writing-mode Kiedy atrybut value jest ustawiony na vertical-rl, kierunek blokowy jest z prawej na lewo. W rezultacie początkowa część elementu przenosi się do prawej strony:

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

Spróbuj sam

Język CSS

scroll-margin-block-start: 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

Referencje:Atrybut scroll-snap-align w CSS

Referencje:Atrybut scroll-snap-type w CSS

Referencje:Atrybut writing-mode w CSS