CSS - scroll-padding-inline-end
CSS scroll-padding-inline-end specifies the offsets for the end edge of the scrollport, in the inline dimension.
Possible Values
<length-percentage> − A valid length or percentage value, defining an inwards offset from the corresponding edge of the scrollport.
<auto> − An inwards offset from the corresponding edge of the scrollport determined by the user agent.
Applies to
All the scroll containers.
Syntax
scroll-padding-inline-end = auto | <length-percentage>
CSS scroll-padding-inline-end - length Value
The following example demonstrates how to use the scroll-padding-inline-end property to set the offsets for the end edge of the scrollport in the inline dimension, using a length value (20px).
<html> <head> <style> #container { width: 50%; height: 400px; aspect-ratio: 3/2; padding: 0 30px; border: solid black 2px; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; scroll-snap-type: x mandatory; scroll-padding-inline-end: 2em; } .boxA { background-color: rgb(234, 234, 128); height: 75%; aspect-ratio: 5/3; } .boxB { background-color: lightblue; height: 60%; aspect-ratio: 5/4; } .boxA, .boxB { display: inline-block; margin: 2px; scroll-snap-align: none end; } </style> </head> <body> <h3>CSS scroll-padding-inline-end property.</h3> <p>scroll-padding-inline-end property sets the scroll padding at the end edge of an element in the inline dimension.</p> <div id="container"> <div class="boxA"></div> <div class="boxB"></div> <div class="boxA"></div> <div class="boxB"></div> <div class="boxA"></div> </div> </body> </html>
CSS scroll-padding-inline-end - percentage Value
The following example demonstrates how to use the scroll-padding-inline-end property to set the scroll padding of the end edge of the div element in the inline dimension, using a percentage value (60%).
<html> <head> <style> #container { width: 50%; height: 400px; aspect-ratio: 3/2; padding: 0 30px; border: solid black 2px; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; scroll-snap-type: x mandatory; scroll-padding-inline-end: 60%; } .boxA { background-color: rgb(234, 234, 128); height: 75%; aspect-ratio: 5/3; } .boxB { background-color: lightblue; height: 60%; aspect-ratio: 5/4; } .boxA, .boxB { display: inline-block; margin: 2px; scroll-snap-align: none end; } </style> </head> <body> <h3>CSS scroll-padding-inline-end property.</h3> <p>scroll-padding-inline-start property sets the scroll padding of end edge of the element in the inline dimension.</p> <div id="container"> <div class="boxA"></div> <div class="boxB"></div> <div class="boxA"></div> <div class="boxB"></div> <div class="boxA"></div> </div> </body> </html>
CSS scroll-padding-inline-end - auto Value
The following example demonstrates how to use the scroll-padding-inline-end property to set the scroll padding of end edge of the div element in the inline dimension, using the keyword value (auto).
<html> <head> <style> #container { width: 50%; height: 400px; aspect-ratio: 3/2; padding: 0 30px; border: solid black 2px; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; scroll-snap-type: x mandatory; scroll-padding-inline-end: auto; } .boxA { background-color: rgb(234, 234, 128); height: 75%; aspect-ratio: 5/3; } .boxB { background-color: lightblue; height: 60%; aspect-ratio: 5/4; } .boxA, .boxB { display: inline-block; margin: 2px; scroll-snap-align: none end; } </style> </head> <body> <h3>CSS scroll-padding-inline-end property.</h3> <p>scroll-padding-inline-end property sets the scroll padding of the end edge of the element in the inline dimension.</p> <div id="container"> <div class="boxA"></div> <div class="boxB"></div> <div class="boxA"></div> <div class="boxB"></div> <div class="boxA"></div> </div> </body> </html>
To Continue Learning Please Login
Login with Google