Η ιδιότητα scroll-padding-block-start του CSS

Ορισμός και χρήση

scroll-padding-block-start Η ιδιότητα καθορίζει τη διαδρομή από την αρχή του κουτιού στην θέση προσεγγίσεως του υποελλειμμένου στοιχείου στον τομέα.

Αυτό σημαίνει ότι όταν σταματήσετε τη ροή, η ροή θα προσαρμοστεί γρήγορα και θα σταματήσει στη θέση προσεγγίσεως και στη διαδρομή που καθορίζεται μεταξύ του κουτιού και της θέσης προσεγγίσεως.

Η κατεύθυνση του τομέα είναι η θέση σε σχέση με την υπάρχουσα γραμμή, η κατεύθυνση στην οποία το επόμενο παράγραφο θα τοποθετηθεί. Αυτό είναι επίσης ο τρόπος διάταξης των ετικετών που έχουν CSS display: block; (όπως τα ετικέτες <p> και <div>) στη σελίδα. Η κατεύθυνση του τομέα εξαρτάται από τη γλώσσα γραφής, π.χ. η νέα γραμμή της μογγολικής γλώσσας είναι διατεταγμένη από αριστερά προς τα δεξιά, οπότε η κατεύθυνση του τομέα είναι από αριστερά προς τα δεξιά, ενώ η κατεύθυνση του τομέα στη σελίδα της αγγλικής γλώσσας είναι προς τα κάτω. Η κατεύθυνση του τομέα μπορεί να καθοριστεί από την ιδιότητα CSS writing-mode to define.

The snap position refers to the location where the child element snaps to in the container when you stop scrolling. It is defined by

Note:This attribute only applies to the block direction scroll-snap-align attribute set to 'start' before it takes effect.

to see scroll-padding-block-start attribute effect on the parent element, and set the scroll-snap-align attributes, and set the scroll-padding-block-start and scroll-snap-type attribute.

Instance

Example 1

Sets the block direction scroll inner padding from the container starting position to the snap position to 20px:

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

Try It Yourself

Example 2: Image Library

In a gallery with snap behavior, you can use scroll-padding-block-start attribute pushes the image below the fixed element:

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

Try It Yourself

Example 3

When the container element's writing-mode When the attribute value is set to vertical-rl, the starting position of the container in the block direction and the child elements move from the top to the right. This affects the scroll snap behavior and scroll-padding-block-start How the attribute works:

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

Try It Yourself

CSS Syntax

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

Property Value

Technical Details

Browser Support

The numbers in the table represent the browser version that first fully supports this property.

Σχετικές σελίδες

Αναφορά:Η ιδιότητα scroll-snap-align του CSS

Αναφορά:Η ιδιότητα scroll-snap-type του CSS

Αναφορά:Ατριβή writing-mode ιδιότητα