CSS scroll-padding-block attribute

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

scroll-padding-block Η ιδιότητα καθορίζει την απόσταση από το κουτί στο σημείο αγκυρώματος του υποοστοίς στοιχείου στο τοπίο

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

Η κατεύθυνση του τοπίου είναι η κατεύθυνση στην οποία το επόμενο στίγμα τοποθετείται σε σχέση με τη θέση της τρέχουσας γραμμής,这也是CSS display: block;标签（如 <p> 和 <div> 标签）在页面上的布局方式。块方向取决于书写语言，例如，蒙古语中新行从左到右排列，因此块方向也是从左到右，而英语页面则具有向下的块方向。块方向可以通过 CSS 属性 writing-mode να οριστεί.

Η θέση του αγκυρώματος είναι η θέση που ο υποοστικός στοιχείο αγκυρώνεται στο κουτί όταν σταματήσετε τη συρρίκνωση

Σημείωση:Αυτή η ιδιότητα ισχύει μόνο στην κατεύθυνση του τοπίουscroll-snap-align Είναι έγκυρη όταν η ιδιότητα ρυθμιστεί σε 'start' ή 'end'.

scroll-padding-block Η ιδιότητα είναι η σύντομη μορφή των παρακάτω ιδιοτήτων:

• scroll-padding-block-start
• scroll-padding-block-end

scroll-padding-block Οι τιμές των ιδιοτήτων μπορούν να ρυθμιστούν με διάφορους τρόπους:

Αν η ιδιότητα scroll-padding-block έχει δύο τιμές:

scroll-padding-block: 10px 50px;

• Η απόσταση από την αρχή είναι 10px
• Η απόσταση από το τέλος είναι 50px

Αν η ιδιότητα scroll-padding-block έχει μια τιμή:

scroll-padding-block: 10px;

• Η απόσταση από την αρχή και το τέλος είναι 10px

για να δείτε scroll-padding-block Η επίδραση των χαρακτηριστικών πρέπει να ρυθμιστεί στους υποοστοίς στοιχείους scroll-snap-align attribute, and set it on the parent element scroll-padding-block and scroll-snap-type attribute.

CSS's scroll-padding-block and scroll-padding-inline attributes are related to the CSS property CSS scroll-padding-top attribute,scroll-padding-bottom,scroll-padding-left and scroll-padding-right are very similar, but scroll-padding-block and scroll-padding-inline The attribute depends on the block direction and inline direction.

Example

Example 1

Set the scroll padding in the block direction to 20px from the container to the snap position:

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

Try It Yourself

Example 2: Image Library

scroll-padding-block The attribute can be used in image galleries with snap behavior to push the images below the fixed element:

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

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 and its child elements on the block direction moves from the top to the right, and the ending position moves from the bottom to the left. This will affect the scroll snap behavior and scroll-padding-block How the attribute works:

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

Try It Yourself

CSS Syntax

scroll-padding-block: 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.

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

Παρατήρηση:CSS scroll-padding-block-end attribute

Παρατήρηση:CSS scroll-padding-block-start attribute

Παρατήρηση:CSS scroll-snap-align attribute

Παρατήρηση:CSS scroll-snap-type attribute

Παρατήρηση:CSS μορφή γραφής ιδιότητα