<div class="field">
<div class="main" id="section1">
<h4>Section 1</h4>
<p>Click on the link to see the "smooth" scrolling effect.</p>
<a href="#section2">Click me to smooth scroll to section 2 below</a>
<p>Note: Remove the scroll-behavior property to remove smooth scrolling.</p>
</div>
<div class="main" id="section2">
<h4>Section 2</h4>
<a href="#section1">Click Me to smooth scroll to section 1 above</a>
</div>
</div>
<style>
html {scroll-behavior: smooth;}
#section1 {height: 60vw;background-color: pink;}
#section2 {height: 60vw;background-color: yellow;}
</style>
- specifies the distance between the snap position and the container. This means that when you stop scrolling, the scrolling will quickly adjust and stop at a specified distance between the snap position and the container.
Snap position is the position on the child element where it snaps into place in the container when you stop scrolling.
The scroll-margin property is a shorthand property for the following properties: "scroll-margin-top", "scroll-margin-bottom", "scroll-margin-left", "scroll-margin-right".
Values for the scroll-margin property can be set in different ways:
If the scroll-margin property has four values: {scroll-margin: 15px 30px 60px 90px;} : top distance is 15px, right distance is 30px, bottom distance is 60px, left distance is 90px. If the scroll-margin property has three values: { scroll-margin: 15px 30px 60px;} : top distance is 15px, left and right distances are 30px, bottom distance is 60px. If the scroll-margin property has two values: {scroll-margin: 15px 30px;} : top and bottom distances are 15px, left and right distances are 30px. If the scroll-margin property has one value: {scroll-margin: 10px;} : all four distances are 10px.
To see the effect from the scroll-margin property, the scroll-margin and scroll-snap-align properties must be set on the child elements, and the scroll-snap-type property must be set on the parent element.
Scroll-margin property is set on the child elements inside the container, so that snap position is offset by a margin inside the container.
In this case, snap position is set to start in y direction, so the element in focus should snap into place at the very top of the container. But instead, because of the scroll-margin value, the element in focus is offset by 2vw margin between child element and container.
code:
<div>
<p>Scroll-margin property is set on the child elements inside the
container, so that snap position is offset by a margin inside the
container.</p>
<p>In this case, snap position is set to start in y direction, so the element in
focus should snap into place at the very top of the container. But instead, because
of the scroll-margin value, the element in focus is offset by 2vw margin between child
element and container.</p>
<div id="container-A">
<div class="blue"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
</div>
<style>
#container-A {width: 80%; aspect-ratio: 3/1; padding: 4vw 0; margin: auto;
\border: solid black 0.2vw; overflow-x: hidden; overflow-y: scroll; scroll-snap-type:
y mandatory;}
.blue {background-color: lightblue; width: 95%; aspect-ratio: 3/1;}
.green {background-color: lightgreen; width: 80%; aspect-ratio: 4/1;}
.blue, .green { margin: 0.2vw; scroll-snap-align: start; scroll-margin: 2vw;}
</style>
- specifies the distance in block direction, between the snap position and the container. This means that when you stop scrolling, the scrolling will quickly adjust and stop at a specified distance in block direction, between the snap position and the container.
This property only works if the "scroll-snap-align" property is set to 'start' or 'end' for the block direction.
Block direction is where the next line is put compared to the position of an existing line, and this is also how tags with CSS display: block; like <p> and <div> tags are laid out on a page. Block direction is dependent on the written language - e.g. in Mongolian language, new lines are laid out left to right which makes block direction left to right - , while pages in English have a downward block direction. Block direction can be defined with CSS property writing-mode. Snap position is the position on the child element where it snaps into place in the container when you stop scrolling.
The scroll-margin-block property is a shorthand property for the following properties: "scroll-margin-block-start", "scroll-margin-block-end". Values for the scroll-margin-block property can be set in different ways:
If the scroll-margin-block property has two values: {scroll-margin-block: 10px 50px;} : distance at start is 10px, distance at end is 50px. If the scroll-margin-block property has one value: {scroll-margin-block: 10px;} :distance at start and end is 10px.
To see the effect from the scroll-margin-block property, the scroll-margin-block and scroll-snap-align properties must be set on the child elements, and the scroll-snap-type property must be set on the parent element.
Scroll-margin-block property is set on the child elements inside the container, so that snap position is offset by a margin inside the container in the block direction.
In this case, snap position is set to start in block direction, so the element in focus should snap into place at the very top of the container. But instead, because of the scroll-margin-block value, the element in focus is offset by 1vw margin between child element and container.
code:
<div>
<p>Scroll-margin-block property is set on the child elements inside the container, so that snap
position is offset by a margin inside the container in the block direction.</p>
<p>In this case, snap position is set to start in block direction, so the element in focus should
snap into place at the very top of the container. But instead, because of the scroll-margin-block value,
the element in focus is offset by 1vw margin between child element and container.</p>
<div id="container-B">
<div class="blue-B"></div>
<div class="green-B"></div>
<div class="blue-B"></div>
<div class="green-B"></div>
<div class="blue-B"></div>
<div class="green-B"></div>
<div class="blue-B"></div>
</div>
</div>
<style>
#container-B {width: 80%; aspect-ratio: 3/1; padding: 4vw 0; margin: auto; border: solid black 0.2vw;
overflow-x: hidden; overflow-y: scroll; scroll-snap-type: y mandatory;}
.blue-B {background-color: lightblue; width: 95%; aspect-ratio: 3/1;}
.green-B {background-color: lightgreen; width: 80%; aspect-ratio: 4/1;}
.blue-B, .green-B { margin: 0.2vw; scroll-snap-align: start none; scroll-margin-block: 1vw;}
</style>
- specifies the distance in block direction, between the snap position and the container. This means that when you stop scrolling, the scrolling will quickly adjust and stop at a specified distance in block direction, between the snap position at the end of the child element and the container.
This property only works if the "scroll-snap-align" property is set to 'end' for the block direction.
Block direction is where the next line is put compared to the position of an existing line, and this is also how tags with CSS display: block; like <p> and <div> tags are laid out on a page. Block direction is dependent on the written language - e.g. in Mongolian language, new lines are laid out left to right which makes block direction left to right - , while pages in English have a downward block direction. Block direction can be defined with CSS property writing-mode. Snap position is the position on the child element where it snaps into place in the container when you stop scrolling.
To see the effect from the scroll-margin-block-end property, the scroll-margin-block-end and scroll-snap-align properties must be set on the child elements, and the scroll-snap-type property must be set on the parent element.
Scroll-margin-block-end property is set on the child elements inside the container, so that snap position is offset by a margin inside the container in the block direction.
In this case, snap position is set to end in block direction, so the element in focus should snap into place at the very bottom of the container. But instead, because of the scroll-margin-block-end value, the element in focus is offset by 2vw margin between child element and container.
code:
<div>
<p>Scroll-margin-block-end property is set on the child elements inside the container, so that
snap position is offset by a margin inside the container in the block direction.</p>
<p>In this case, snap position is set to end in block direction, so the element in focus should
snap into place at the very bottom of the container. But instead, because of the
scroll-margin-block-end value, the element in focus is offset by 2vw margin between child element
and container.</p>
<div id="container-C">
<div class="blue-C"></div>
<div class="green-C"></div>
<div class="blue-C"></div>
<div class="green-C"></div>
<div class="blue-C"></div>
<div class="green-C"></div>
<div class="blue-C"></div>
</div>
</div>
<style>
#container-C {width: 80%; aspect-ratio: 3/1; padding: 4vw 0; margin: auto;
border: solid black 0.2vw; overflow-x: hidden; overflow-y: scroll;
scroll-snap-type: y mandatory;}
.blue-C {background-color: lightblue; width: 95%; aspect-ratio: 3/1;}
.green-C {background-color: lightgreen; width: 80%; aspect-ratio: 4/1;}
.blue-C, .green-C { margin: 0.2vw; scroll-snap-align: end none;
scroll-margin-block-end: 2vw;}
</style>
- specifies the distance in block direction, between the snap position and the container. This means that when you stop scrolling, the scrolling will quickly adjust and stop at a specified distance in block direction, between the snap position at the start of the child element and the container.
This property only works if the "scroll-snap-align" property is set to 'start' for the block direction.
Block direction is where the next line is put compared to the position of an existing line, and this is also how tags with CSS display: block; like <p> and <div> tags are laid out on a page. Block direction is dependent on the written language - e.g. in Mongolian language, new lines are laid out left to right which makes block direction left to right - , while pages in English have a downward block direction. Block direction can be defined with CSS property writing-mode. Snap position is the position on the child element where it snaps into place in the container when you stop scrolling.
To see the effect from the scroll-margin-block-start property, the scroll-margin-block-start and scroll-snap-align properties must be set on the child elements, and the scroll-snap-type property must be set on the parent element.
Scroll-margin-block-start property is set on the child elements inside the container, so that snap position is offset by a margin inside the container in the block direction.
In this case, snap position is set to start in block direction, so the element in focus should snap into place at the very top of the container. But instead, because of the scroll-margin-block-start value, the element in focus is offset by 2vw margin between child element and container.
code:
<p>Scroll-margin-block-start property is set on the child elements inside the
container, so that snap position is offset by a margin inside the container
in the block direction. </p>
<p>In this case, snap position is set to start in block direction, so the element in
focus should snap into place at the very top of the container. But instead, because
of the scroll-margin-block-start value, the element in focus is offset by 2vw margin
between child element and container.</p>
<div id="container-D">
<div class="blue-D"></div>
<div class="green-D"></div>
<div class="blue-D"></div>
<div class="green-D"></div>
<div class="blue-D"></div>
<div class="green-D"></div>
<div class="blue-D"></div>
</div>
</div>
<style>
#container-D {width: 80%; aspect-ratio: 3/1; padding: 4vw 0; margin: auto;
border: solid black 0.2vw; overflow-x: hidden; overflow-y: scroll;
scroll-snap-type: y mandatory;}
.blue-D {background-color: lightblue; width: 95%; aspect-ratio: 3/1;}
.green-D {background-color: lightgreen; width: 80%; aspect-ratio: 4/1;}
.blue-D, .green-D { margin: 0.2vw; scroll-snap-align: start none;
scroll-margin-block-start: 2vw;}
</style>
- specifies the distance between the snap position and the container.
This property only works if the snap position is placed at the bottom of the child element.
To see the effect from the scroll-margin-bottom property, the scroll-margin-bottom and scroll-snap-align properties must be set on the child elements, and the scroll-snap-type property must be set on the parent elementottom: 0 | value | initial | inherit;
Property values:
0 : scroll-margin-bottom is zero. This is default.
length : specifies scroll-margin-bottom in px, pt, cm, etc. Negative values are allowed
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
- specifies the distance in the inline direction, between the snap position and the container. This means that when you stop scrolling, the scrolling will quickly adjust and stop at a specified distance in the inline direction, between the snap position and the container.
This property only works if the "scroll-snap-align" property is set to 'start' or 'end' for the inline direction.
Inline direction is where the next character is put compared to the position of the existing character in a line, and this is also how tags with CSS "display: inline;" like <a> and <strong> tags are laid out in the text. Inline direction is dependent on the written language - e.g. in Arabic, new characters are laid out right to left which makes inline direction right to left - , while pages in English have a left to right inline direction. Inline direction can be defined with CSS property direction and writing-mode. Snap position is the position on the child element where it snaps into place in the container when you stop scrolling.
The scroll-margin-inline property is a shorthand property for the following properties: "scroll-margin-inline-start", "scroll-margin-inline-end". Values for the scroll-margin-iline property can be set in different ways:
If the scroll-margin-inline property has two values: {scroll-margin-inline: 10px 50px;} : distance at start is 10px, distance at end is 50px. If the scroll-margin-inline property has one value: {scroll-margin-inline: 10px;} :distance at start and end is 10px.
To see the effect from the scroll-margin-inline property, the scroll-margin-inline and scroll-snap-align properties must be set on the child elements, and the scroll-snap-type property must be set on the parent element.
Scroll-margin-inline property is set on the child elements inside the container, so that snap position is offset by a margin inside the container in the inline direction.
In this case, snap position is set to start in inline direction, so the element in focus should snap into place at the very left of the container. But instead, because of the scroll-margin-inline value, the element in focus is offset by a 2vw distance between child element and container.
code:
<div>
<p>Scroll-margin-inline property is set on the child elements inside the container,
so that snap position is offset by a margin inside the container in the inline
direction.</p>
<p>In this case, snap position is set to start in inline direction, so the element
in focus should snap into place at the very left of the container. But instead, because
of the scroll-margin-inline value, the element in focus is offset by a 2vw distance between
child element and container.</p>
<div id="container-F">
<div class="blue-F"></div>
<div class="green-F"></div>
<div class="blue-F"></div>
<div class="green-F"></div>
<div class="blue-F"></div>
<div class="green-F"></div>
<div class="blue-F"></div>
</div>
</div>
<style>
#container-F {width: 80%; aspect-ratio: 2/1; padding: 0 4vw; margin: auto;
border: solid black 0.2vw; overflow-x: scroll; overflow-y: hidden;
white-space: nowrap; scroll-snap-type: x mandatory;}
.blue-F {background-color: lightblue; height: 95%; aspect-ratio: 1/1;}
.green-F {background-color: lightgreen; height: 80%; aspect-ratio: 1/2;}
.blue-F, .green-F {display: inline-block; margin: 0.2vw;
scroll-snap-align: none start; scroll-margin-inline: 2vw;}
</style>
- specifies the distance in the inline direction, between the snap position and the container. This means that when you stop scrolling, the scrolling will quickly adjust and stop at a specified distance in the inline direction, between the snap position and the end of the child element and the container.
This property only works if the "scroll-snap-align" property is set to 'end' for the inline direction.
Inline direction is where the next character is put compared to the position of the existing character in a line, and this is also how tags with CSS "display: inline;" like <a> and <strong> tags are laid out in the text. Inline direction is dependent on the written language - e.g. in Arabic, new characters are laid out right to left which makes inline direction right to left - , while pages in English have a left to right inline direction. Inline direction can be defined with CSS property direction and writing-mode. Snap position is the position on the child element where it snaps into place in the container when you stop scrolling.
To see the effect from the scroll-margin-inline-end property, the scroll-margin-inline-end and scroll-snap-align properties must be set on the child elements, and the scroll-snap-type property must be set on the parent element.
Scroll-margin-inline-end property is set on the child elements inside the container, so that snap position is offset by a margin inside the container in the inline direction.
In this case, snap position is set to end in inline direction, so the element in focus should snap into place at the very right of the container. But instead, because of the scroll-margin-inline-end value, the element in focus is offset by a 2vw margin between child element and container.
code:
<div>
<p>Scroll-margin-inline-endc property is set on the child elements inside the container,
so that snap position is offset by a margin inside the container in the inline direction.</p>
<p>In this case, snap position is set to end in inline direction, so the element in
focus should snap into place at the very right of the container. But instead, because of
the scroll-margin-inline-end value, the element in focus is offset by a 2vw margin between
child element and container.</p>
<div id="container-G">
<div class="blue-G"></div>
<div class="green-G"></div>
<div class="blue-G"></div>
<div class="green-G"></div>
<div class="blue-G"></div>
<div class="green-G"></div>
<div class="blue-G"></div>
</div>
</div>
<style>
#container-G {width: 80%; aspect-ratio: 2/1; margin: auto; border: solid black 0.2vw;
overflow-x: scroll; overflow-y: hidden; white-space: nowrap;
scroll-snap-type: x mandatory;}
.blue-G {background-color: lightblue; height: 95%; aspect-ratio: 1/1;}
.green-G {background-color: lightgreen; height: 80%; aspect-ratio: 1/2;}
.blue-G, .green-G {display: inline-block; margin: 0.2vw; scroll-snap-align: none end;
scroll-margin-inline-end: 2vw;}
</style>
- specifies the distance in the inline direction, between the snap position and the container. This means that when you stop scrolling, the scrolling will quickly adjust and stop at a specified distance in the inline direction, between the snap position and the start of the child element and the container.
This property only works if the "scroll-snap-align" property is set to 'start' for the inline direction.
Inline direction is where the next character is put compared to the position of the existing character in a line, and this is also how tags with CSS "display: inline;" like <a> and <strong> tags are laid out in the text. Inline direction is dependent on the written language - e.g. in Arabic, new characters are laid out right to left which makes inline direction right to left - , while pages in English have a left to right inline direction. Inline direction can be defined with CSS property direction and writing-mode. Snap position is the position on the child element where it snaps into place in the container when you stop scrolling.
To see the effect from the scroll-margin-inline-start property, the scroll-margin-inline-start and scroll-snap-align properties must be set on the child elements, and the scroll-snap-type property must be set on the parent element.
Scroll-margin-inline-start property is set on the child elements inside the container, so that snap position is offset by a margin inside the container in the inline direction.
In this case, snap position is set to start in inline direction, so the element in focus should snap into place at the very left of the container. But instead, because of the scroll-margin-inline-start value, the element in focus is offset by a 2vw margin between child element and container.
code:
<div>
<p>Scroll-margin-inline-start property is set on the child elements inside
the container, so that snap position is offset by a margin inside the container
in the inline direction.</p>
<p>In this case, snap position is set to start in inline direction, so the
element in focus should snap into place at the very left of the container. But
instead, because of the scroll-margin-inline-start value, the element in focus
is offset by a 2vw margin between child element and container.</p>
<div id="container-H">
<div class="blue-H"></div>
<div class="green-H"></div>
<div class="blue-H"></div>
<div class="green-H"></div>
<div class="blue-H"></div>
<div class="green-H"></div>
<div class="blue-H"></div>
</div>
</div>
<style>
#container-H {width: 80%; aspect-ratio: 2/1; padding: 0 4vw; margin: auto;
border: solid black 0.2vw; overflow-x: scroll; overflow-y: hidden;
white-space: nowrap; scroll-snap-type: x mandatory;}
.blue-H {background-color: lightblue; height: 95%; aspect-ratio: 1/1;}
.green-H {background-color: lightgreen; height: 80%; aspect-ratio: 1/2;}
.blue-H, .green-H {display: inline-block; margin: 0.2vw;
scroll-snap-align: none start; scroll-margin-inline-start: 2vw;}
</style>
- specifies the distance between the snap position and the container.
This property only works if the snap position is placed on the left side of the child element.
To see the effect from the scroll-margin-left property, the "scroll-margin-left" and "scroll-snap-align" properties must be set on the child elements, and the "scroll-snap-type" property must be set on the parent element.
- specifies the distance between the snap position and the container.
This property only works if the snap position is placed on the right side of the child element.
To see the effect from the scroll-margin-right property, the "scroll-margin-right" and "scroll-snap-align" properties must be set on the child elements, and the "scroll-snap-type" property must be set on the parent element.
- specifies the distance between the snap position and the container.
This property only works if the snap position is placed at the top of the child element.
To see the effect from the scroll-margin-top property, the "scroll-margin-topt" and "scroll-snap-align" properties must be set on the child elements, and the "scroll-snap-type" property must be set on the parent element.
Scroll-margin-topp property is set on the child elements, so that snap position on the top side is offset by a distance to the container.
code:
<div>
<p>Scroll-margin-topp property is set on the child elements, so that snap
position on the top side is offset by a distance to the container.</p>
<div id="container-K">
<div class="blue-K"></div>
<div class="green-K"></div>
<div class="blue-K"></div>
<div class="green-K"></div>
<div class="blue-K"></div>
<div class="green-K"></div>
<div class="blue-K"></div>
</div>
</div>
<style>
#container-K {position: relative; width: 80%; aspect-ratio: 3/1; margin: auto;
border: solid black 0.2vw; overflow-x: hidden; overflow-y: scroll;
white-space: nowrap; scroll-snap-type: y mandatory;}
.blue-K {background-color: lightblue; width: 95%; aspect-ratio: 3/1;}
.green-K {background-color: lightgreen; width: 80%; aspect-ratio: 4/1;}
.blue-K, .green-K { margin: 0.2vw; scroll-snap-align: start;
scroll-margin-top: 2vw;}
</style>
- specifies the distance from the container to the snap position of child elements. This means that when you stop scrolling, the scrolling will quickly adjust and stop at a specified distance from the container to the snap position of the child element in focus.
Snap position is the position on the child element where it snaps into place in the container when you stop scrolling.
The scroll-padding property is a shorthand property for the following properties: "scroll-padding-top", "scroll-padding-bottom", "scroll-padding-left", "scroll-padding-right".
Values for the scroll-padding property can be set in different ways:
If the scroll-padding property has four values: {scroll-padding: 15px 30px 60px 90px;} : top distance is 15px, right distance is 30px, bottom distance is 60px, left distance is 90px. If the scroll-padding property has three values: { scroll-padding: 15px 30px 60px;} : top distance is 15px, left and right distances are 30px, bottom distance is 60px. If the scroll-padding property has two values: {scroll-padding: 15px 30px;} : top and bottom distances are 15px, left and right distances are 30px. If the scroll-padding property has one value: {scroll-padding: 10px;} : all four distances are 10px.
To see the effect from the scroll-padding property, the "scroll-snap-align" property must be set on the child elements, and the "scroll-padding" and "scroll-snap-type" properties must be set on the parent element.
CSS syntax : scroll-padding: auto | value | initial | inherit
Property values:
auto : default value. The browser calculates the padding
length : specifies scroll-padding in px, pt, cm, etc. Negative values are not allowed
% : specifies scroll-padding in percent of the width of the containing element.
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
Scroll-padding property is set on the container, so that snap position of child elements is offset by a distance from the container.
In this case, snap position is set to start in y direction, so the element in focus should snap into place at the very top of the container. But instead, because of the scroll-padding value, the element in focus is offset by 2vw padding from the container.
code:
<div>
<p>Scroll-padding property is set on the container, so that snap position of child
elements is offset by a distance from the container.</p>
<p>In this case, snap position is set to start in y direction, so the element in
focus should snap into place at the very top of the container. But instead, because
of the scroll-padding value, the element in focus is offset by 2vw padding from the
container.</p>
<div id="container-L">
<div class="blue-L"></div>
<div class="green-L"></div>
<div class="blue-L"></div>
<div class="green-L"></div>
<div class="blue-L"></div>
<div class="green-L"></div>
<div class="blue-L"></div>
</div>
</div>
<style>
#container-L {width: 80%; aspect-ratio: 3/1; padding: 4vw 0; margin: auto;
border: solid black 0.2vw; overflow-x: hidden; overflow-y: scroll;
scroll-snap-type: y mandatory; scroll-padding: 2vw;}
.blue-L {background-color: lightblue; width: 95%; aspect-ratio: 3/1;}
.green-L {background-color: lightgreen; width: 80%; aspect-ratio: 4/1;}
.blue-L, .green-L { margin: 0.2vw; scroll-snap-align: start;}
</style>
- specifies the distance in block direction, from the container to the snap position on the child elements. This means that when you stop scrolling, the scrolling will quickly adjust and stop at a specified distance in block direction, between the snap position and the container.
This property only works if the "scroll-snap-align" property is set to 'start' or 'end' for the block direction.
Block direction is where the next line is put compared to the position of an existing line, and this is also how tags with CSS display: block; like <p> and <div> tags are laid out on a page. Block direction is dependent on the written language - e.g. in Mongolian language, new lines are laid out left to right which makes block direction left to right - , while pages in English have a downward block direction. Block direction can be defined with CSS property writing-mode. Snap position is the position on the child element where it snaps into place in the container when you stop scrolling.
The scroll-padding-block property is a shorthand property for the following properties: "scroll-padding-block-start", "scroll-padding-block-end". Values for the scroll-padding-block property can be set in different ways:
If the scroll-padding-block property has two values: {scroll-padding-block: 10px 50px;} : distance at start is 10px, distance at end is 50px. If the scroll-padding-block property has one value: {scroll-padding-block: 10px;} : distance at start and end is 10px.
To see the effect from the scroll-padding-block property, the "scroll-snap-align" property must be set on the child elements, and the "scroll-padding-block" and "scroll-snap-type" properties must be set on the parent element.
CSS syntax : scroll-padding-block: auto | value | initial | inherit;
Property values:
auto : default. The browser calculates the padding.
length : specifies scroll-padding-block in px, pt, cm, etc. Negative values are not allowed
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
Scroll-padding-block property is set on the container element, so that snap position is offset by a padding from the container in the block direction.
In this case, snap position is set to start in block direction, so the element in focus should snap into place at the very top of the container. But instead, because of the scroll-padding-block value, the element in focus is offset by 2vw distance from the container to the child element.
code:
<div>
<p>Scroll-padding-block property is set on the container element, so that snap
position is offset by a padding from the container in the block direction.</p>
<p>In this case, snap position is set to start in block direction, so the
element in focus should snap into place at the very top of the container. But
instead, because of the scroll-padding-block value, the element in focus is offset
by 2vw distance from the container to the child element.</p>
<div id="container-M">
<div class="blue-M"></div>
<div class="green-M"></div>
<div class="blue-M"></div>
<div class="green-M"></div>
<div class="blue-M"></div>
<div class="green-M"></div>
<div class="blue-M"></div>
</div>
</div>
<style>
#container-M {width: 80%; aspect-ratio: 3/1; padding: 4vw 0; margin: auto;
border: solid black 0.2vw; overflow-x: hidden; overflow-y: scroll;
scroll-snap-type: y mandatory; scroll-padding-block: 2vw;}
.blue-M {background-color: lightblue; width: 95%; aspect-ratio: 3/1;}
.green-M {background-color: lightgreen; width: 80%; aspect-ratio: 4/1;}
.blue-M, .green-M { margin: 0.2vw; scroll-snap-align: start none;}
</style>
- specifies the distance in block direction from the end of the container to the snap position on the child elements. This means that when you stop scrolling, the scrolling will quickly adjust and stop at a specified distance in block direction, between the snap position and the container.
This property only works if the "scroll-snap-align" property is set to 'end' for the block direction.
Block direction is where the next line is put compared to the position of an existing line, and this is also how tags with CSS display: block; like <p> and <div> tags are laid out on a page. Block direction is dependent on the written language - e.g. in Mongolian language, new lines are laid out left to right which makes block direction left to right - , while pages in English have a downward block direction. Block direction can be defined with CSS property writing-mode. Snap position is the position on the child element where it snaps into place in the container when you stop scrolling.
To see the effect from the scroll-padding-block-end property, the "scroll-snap-align" property must be set on the child elements, and the "scroll-padding-block-end" and "scroll-snap-type" properties must be set on the parent element.
CSS syntax : scroll-padding-block-end: auto | value | initial | inherit;
Property values:
0 : default value. The browser calculates the padding
length : specifies scroll-padding-block-end in px, pt, cm, etc. Negative values are not allowed
% : specifies the padding in percent of the width of the containing element.
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
Scroll-padding-block-end property is set on the container, so that snap position on child elements is offset by a distance from the end of the container in the block direction.
In this case, snap position is set to end in block direction, so the element in focus should snap into place at the very bottom of the container. But instead, because of the scroll-padding-block-end value, the element in focus is offset by 2vw distance from the end of the container to the child element.
code:
<div>
<p>Scroll-padding-block-end property is set on the container, so that snap
position on child elements is offset by a distance from the end of the container
nt in focus should snap into place at the very bottom of the container. But
instead, because of the scroll-padding-block-end value, the element in focus
is offset by 2vw distance from the end of the container to the child element.</p>
<div id="container-N">
<div class="blue-N"></div>
<div class="green-N"></div>
<div class="blue-N"></div>
<div class="green-N"></div>
<div class="blue-N"></div>
<div class="green-N"></div>
<div class="blue-N"></div>
</div>
</div>
<style>
#container-N {width: 80%; aspect-ratio: 2/1; margin: auto; border: solid black 0.2vw;
overflow-x: hidden; overflow-y: scroll; scroll-snap-type: y mandatory;
scroll-padding-block-end: 2vw;}
.blue-N {background-color: lightblue; width: 95%; aspect-ratio: 3/1;}
.green-N {background-color: lightgreen; width: 80%; aspect-ratio: 4/1;}
.blue-N, .green-N { margin: 0.2vw; scroll-snap-align: end none;}
</style>
- specifies the distance in block direction from the start of the container to the snap position on the child elements. This means that when you stop scrolling, the scrolling will quickly adjust and stop at a specified distance in block direction, between the snap position and the container.
This property only works if the "scroll-snap-align" property is set to 'start' for the block direction.
Block direction is where the next line is put compared to the position of an existing line, and this is also how tags with CSS display: block; like <p> and <div> tags are laid out on a page. Block direction is dependent on the written language - e.g. in Mongolian language, new lines are laid out left to right which makes block direction left to right - , while pages in English have a downward block direction. Block direction can be defined with CSS property writing-mode. Snap position is the position on the child element where it snaps into place in the container when you stop scrolling.
To see the effect from the scroll-padding-block-start property, the "scroll-snap-align" property must be set on the child elements, and the "scroll-padding-block-start" and "scroll-snap-type" properties must be set on the parent element.
CSS syntax : scroll-padding-block-start: auto | value | initial | inherit;
Property values:
0 : default value. The browser calculates the padding
length : specifies scroll-padding-block-start in px, pt, cm, etc. Negative values are not allowed
% : specifies the padding in percent of the width of the containing element.
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
Scroll-padding-block-start property is set on the container element, so that snap position on child elements is offset by a distance from the start of the container in the block direction.
In this case, snap position is set to start in block direction, so the element in focus should snap into place at the very top of the container. But instead, because of the scroll-padding-block-start value, the element in focus is offset by 2vw distance from the start of the container to the child element.
code:
<div>
<p>Scroll-padding-block-start property is set on the container element, so that
snap position on child elements is offset by a distance from the start of the
container in the block direction.</p>
<p>In this case, snap position is set to start in block direction, so the element
in focus should snap into place at the very top of the container. But instead, because
of the scroll-padding-block-start value, the element in focus is offset by 2vw distance
from the start of the container to the child element.</p>
<div id="container-O">
<div class="blue-O"></div>
<div class="green-O"></div>
<div class="blue-O"></div>
<div class="green-O"></div>
<div class="blue-O"></div>
<div class="green-O"></div>
<div class="blue-O"></div>
</div>
</div>
<style>
#container-O {width: 80%; aspect-ratio: 3/1; padding: 4vw 0; margin: auto;
border: solid black 0.2vw; overflow-x: hidden; overflow-y: scroll;
scroll-snap-type: y mandatory; scroll-padding-block-start: 2vw;}
.blue-O {background-color: lightblue; width: 95%; aspect-ratio: 3/1;}
.green-O {background-color: lightgreen; width: 80%; aspect-ratio: 4/1;}
.blue-O, .green-O { margin: 0.2vw; scroll-snap-align: start none;}
</style>
- specifies the distance from the bottom of the container to the snap position on the child elements.
This property only works if the snap position is placed at the bottom of the child element.
To see the effect from the scroll-padding-bottom property, the "scroll-snap-align" property must be set on the child elements, and the "scroll-padding-bottom" and the "scroll-snap-type" properties must be set on the parent element.
CSS syntax : scroll-padding-bottom: auto | value | initial | inherit;
Property values:
auto : default value. The browser calculates the padding
length : specifies scroll-padding-bottom in px, pt, cm, etc. Negative values are not allowed
% : specifies the padding in percent of the width of the containing element
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
Scroll-padding-bottom property is set on the container element, so that snap position on child elements is offset by a distance from the bottom of the container.
In this case, snap position is set to end in y direction, so the element in focus should snap into place at the very end of the container. But instead, because of the scroll-padding-bottom value, the element in focus is offset by 2vw distance from the bottom of the container to the child element.
code:
<div>
<p>Scroll-padding-bottom property is set on the container element, so that snap position
on child elements is offset by a distance from the bottom of the container.</p>
<p>In this case, snap position is set to end in y direction, so the element in focus
should snap into place at the very end of the container. But instead, because of the
scroll-padding-bottom value, the element in focus is offset by 2vw distance from
the bottom of the container to the child element.</p>
<div id="container-P">
<div class="blue-P"></div>
<div class="green-P"></div>
<div class="blue-P"></div>
<div class="green-P"></div>
<div class="blue-P"></div>
<div class="green-P"></div>
<div class="blue-P"></div>
</div>
</div>
<style>
#container-P {width: 80%; aspect-ratio: 3/1; margin: auto; border: solid black 0.2vw;
overflow-x: hidden; overflow-y: scroll; scroll-snap-type: y mandatory;
scroll-padding-bottom: 2vw;}
.blue-P {background-color: lightblue; width: 95%; aspect-ratio: 3/1;}
.green-P {background-color: lightgreen; width: 80%; aspect-ratio: 4/1;}
.blue-P, .green-P { margin: 0.2vw; scroll-snap-align: end;}
</style>
- specifies the distance in the inline direction from the container to the snap position on the child elements. This means that when you stop scrolling, the scrolling will quickly adjust and stop at a specified distance between the snap position and the container.
Inline direction is where the next character is put compared to the position of the existing characters in a line, and this is also how tags with CSS "display: inline;" - like <a> and <strong> tags - are laid out in a text. Inline direction is dependent on the written language : in Arabic, new charachters are laid out right to left which makes inline direction right to left, while pages in English have a left to right inline direction. Inline direction can be defined with CSS properties "direction" and "writing-mode".
Snap position is the position on the child element where it snaps into place in the container when you stop scrolling.
Note: this property only works if the "scroll-snap-align" property is set to 'start' or 'end' for the inline direction.
The scroll-padding-inline property is a shorthand property for the following properties: "scroll-padding-inline-start" , "scroll-padding-inline-end".
Values for the scroll-padding-inline property can be set in different ways:
If the scroll-padding-inline property has two values: {scroll-padding-inline: 10px 50px;} : distance at start is 10px, distance at end is 50px. If the scroll-padding-inline property has one value: {scroll-padding-inline: 10px;} : distance at start and end is 10px.
To see the effect from the scroll-padding-inline property, the "scroll-snap-align" property must be set on the child elements, and the "scroll-padding-inline" and the "scroll-snap-type" properties must be set on the parent element.
The CSS scroll-padding-block and scroll-padding-inline properties are very similar to CSS properties "scroll-padding-top", "scroll-padding-bottom", "scroll-padding-left" and "scroll-padding-right", but the scroll-padding-block and scroll-padding-inline properties are dependent on block and inline directions.
CSS syntax : scroll-padding-inline: auto | value | initial | inherit;
Property values:
auto : default value. The browser calculates the padding
length : Specifies scroll-padding-inline in px, pt, cm, etc. Negative values are not allowed.
% : Specifies the padding in percent of the width of the containing element
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
Scroll-padding-inline property is set on the container element, so that snap position is offset by a padding from the container in inline direction.
In this case, snap position is set to start in inline direction, so the element in focus should snap into place at the very left of the container. But instead, because of the scroll-padding-inline value, the element in focus is offset by 2vw distance from the container to the child element.
code:
<div>
<p>Scroll-padding-inline property is set on the container element, so that snap
position is offset by a padding from the container in inline direction.</p>
<p>In this case, snap position is set to start in inline direction, so the element
in focus should snap into place at the very left of the container. But instead,
because of the scroll-padding-inline value, the element in focus is offset by
2vw distance from the container to the child element.</p>
<div id="container-Q">
<div class="blue-Q"></div>
<div class="green-Q"></div>
<div class="blue-Q"></div>
<div class="green-Q"></div>
<div class="blue-Q"></div>
<div class="green-Q"></div>
<div class="blue-Q"></div>
</div>
</div>
<style>
#container-Q {width: 60%; aspect-ratio: 3/2; padding: 0 4vw; margin: auto;
border: solid black 0.2vw; overflow-x: scroll; overflow-y: hidden;
white-space: nowrap; scroll-snap-type: x mandatory;
scroll-padding-inline: 2vw;}
.blue-Q {background-color: lightblue; height: 95%; aspect-ratio: 5/3;}
.green-Q {background-color: lightgreen; height: 80%; aspect-ratio: 5/4;}
.blue-Q, .green-Q {display: inline-block; margin: 0.2vw;
scroll-snap-align: none start;}
</style>
- specifies the distance in the inline direction from the end of the container to the snap position on the child elements. This means that when you stop scrolling, the scrolling will quickly adjust and stop at a specified distance between the snap position and the container.
Inline direction is where the next character is put compared to the position of the existing characters in a line, and this is also how tags with CSS "display: inline;" - like <a> and <strong> tags - are laid out in a text. Inline direction is dependent on the written language : in Arabic, new charachters are laid out right to left which makes inline direction right to left, while pages in English have a left to right inline direction. Inline direction can be defined with CSS properties "direction" and "writing-mode".
Snap position is the position on the child element where it snaps into place in the container when you stop scrolling.
Note: this property only works if the "scroll-snap-align" property is set to 'end' for the inline direction.
To see the effect from the scroll-padding-inline-end property, the "scroll-snap-align" property must be set on the child elements, and the "scroll-padding-inline-end" and the "scroll-snap-type" properties must be set on the parent element.
CSS syntax : scroll-padding-inline-end: auto | value | initial | inherit;
Property values:
auto : default value. The browser calculates the padding
length : Specifies scroll-padding-inline-end in px, pt, cm, etc. Negative values are not allowed.
% : Specifies the padding in percent of the width of the containing element
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
Scroll-padding-inline-end property is set on the container element, so that snap position on child elements is offset by a distance from the end of the container in inline direction.
In this case, snap position is set to end in inline direction, so the element in focus should snap into place at the very right of the container. But instead, because of the scroll-padding-inline value, the element in focus is offset by 2vw distance from the container to the child element.
code:
<div>
<p>Scroll-padding-inline-end property is set on the container element, so that
snap position on child elements is offset by a distance from the end of the
container in inline direction.</p>
<p>In this case, snap position is set to end in inline direction, so the element
in focus should snap into place at the very right of the container. But instead,
because of the scroll-padding-inline value, the element in focus is offset by
2vw distance from the container to the child element.</p>
<div id="container-R">
<div class="blue-R"></div>
<div class="green-R"></div>
<div class="blue-R"></div>
<div class="green-R"></div>
<div class="blue-R"></div>
<div class="green-R"></div>
<div class="blue-R"></div>
</div>
</div>
<style>
#container-R {width: 60%; aspect-ratio: 4/2; margin: auto;
border: solid black 0.2vw; overflow-x: scroll; overflow-y: hidden;
white-space: nowrap; scroll-snap-type: x mandatory;
scroll-padding-inline-end: 2vw;}
.blue-R {background-color: lightblue; height: 95%; aspect-ratio: 5/3;}
.green-R {background-color: lightgreen; height: 80%; aspect-ratio: 5/4;}
.blue-R, .green-R {display: inline-block; margin: 0.2vw;
scroll-snap-align: none end;}
</style>
- specifies the distance in the inline direction from the start of the container to the snap position on the child elements. This means that when you stop scrolling, the scrolling will quickly adjust and stop at a specified distance between the snap position and the container.
Inline direction is where the next character is put compared to the position of the existing characters in a line, and this is also how tags with CSS "display: inline;" - like <a> and <strong> tags - are laid out in a text. Inline direction is dependent on the written language : in Arabic, new charachters are laid out right to left which makes inline direction right to left, while pages in English have a left to right inline direction. Inline direction can be defined with CSS properties "direction" and "writing-mode".
Snap position is the position on the child element where it snaps into place in the container when you stop scrolling.
Note: this property only works if the "scroll-snap-align" property is set to 'start' for the inline direction.
To see the effect from the scroll-padding-inline-start property, the "scroll-snap-align" property must be set on the child elements, and the "scroll-padding-inline-start" and the "scroll-snap-type" properties must be set on the parent element.
CSS syntax : scroll-padding-inline-start: auto | value | initial | inherit;
Property values:
auto : default value. The browser calculates the padding
length : specifies scroll-padding-inline-start in px, pt, cm, etc. Negative values are not allowed.
% : specifies the padding in percent of the width of the containing element
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
Scroll-padding-inline-start property is set on the container element, so that snap position on child elements is offset by a distance from the start of the container in inline direction.
In this case, snap position is set to start in inline direction, so the element in focus should snap into place at the very left of the container. But instead, because of the scroll-padding-inline value, the element in focus is offset by 2vw distance from the container to the child element.
code:
<div>
<p>Scroll-padding-inline-start property is set on the container element, so that
snap position on child elements is offset by a distance from the start of the container
in inline direction.</p>
<p>In this case, snap position is set to start in inline direction, so the element
in focus should snap into place at the very left of the container. But instead,
because of the scroll-padding-inline value, the element in focus is offset by
2vw distance from the container to the child element.</p>
<div id="container-S">
<div class="blue-S"></div>
<div class="green-S"></div>
<div class="blue-S"></div>
<div class="green-S"></div>
<div class="blue-S"></div>
<div class="green-S"></div>
<div class="blue-S"></div>
</div>
</div>
<style>
#container-S {width: 60%; aspect-ratio: 4/2; padding: 0 4vw; margin: auto;
border: solid black 0.2vw; overflow-x: scroll; overflow-y: hidden;
white-space: nowrap; scroll-snap-type: x mandatory;
scroll-padding-inline-start: 2vw;}
.blue-S {background-color: lightblue; height: 95%; aspect-ratio: 5/3;}
.green-S {background-color: lightgreen; height: 80%; aspect-ratio: 5/4;}
.blue-S, .green-S {display: inline-block; margin: 0.2vw;
scroll-snap-align: none start;}
</style>
- specifies the distance from the left side of the container to the snap position on the child elements.
This property only works if the snap position is placed on the left side of the child element.
To see the effect from the scroll-padding-left property, the "scroll-snap-align" property must be set on the child elements, and the "scroll-padding-left" and the "scroll-snap-type" properties must be set on the parent element.
CSS syntax : scroll-padding-left: auto | value | initial | inherit;
Property values:
auto : default value. The browser calculates the padding
length : specifies scroll-padding-left in px, pt, cm, etc. Negative values are not allowed
% : specifies the padding in percent of the width of the containing element
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
Scroll-padding-left property is set on the container, so that the snap position of child elements is offset by a distance to the left of the container.
In this case, snap position is set to start in x direction, so the element in focus should snap into place at the very left of the container. But instead, because of the scroll-padding-left value, the element in focus is offset by a 2vw distance from the left side of the container to the child element.
code:
<div>
<p>Scroll-padding-left property is set on the container, so that the snap
position of child elements is offset by a distance to the left of the container.</p>
<p>In this case, snap position is set to start in x direction, so the element
in focus should snap into place at the very left of the container. But instead,
because of the scroll-padding-left value, the element in focus is offset by a
2vw distance from the left side of the container to the child element.</p>
<div id="container-T">
<div class="blue-T"></div>
<div class="green-T"></div>
<div class="blue-T"></div>
<div class="green-T"></div>
<div class="blue-T"></div>
<div class="green-T"></div>
<div class="blue-T"></div>
</div>
</div>
<style>
#container-T {width: 80%; aspect-ratio: 2/1; margin: auto; border: solid black 0.2vw;
overflow-x: scroll; overflow-y: hidden; white-space: nowrap;
scroll-snap-type: x mandatory; scroll-padding-left: 2vw;}
.blue-T {background-color: lightblue; height: 95%; aspect-ratio: 3/2;}
.green-T {background-color: lightgreen; height: 80%; aspect-ratio: 4/3;}
.blue-T, .green-T {display: inline-block; margin: 0.2vw;
scroll-snap-align: start;}
</style>
- specifies the distance from the right side of the container to the snap position on the child elements.
This property only works if the snap position is placed on the right side of the child element.
To see the effect from the scroll-padding-right property, the "scroll-snap-align" property must be set on the child elements, and the "scroll-padding-right" and the "scroll-snap-type" properties must be set on the parent element.
CSS syntax : scroll-padding-right: auto | value | initial | inherit;
Property values:
auto : default value. The browser calculates the padding
length : specifies scroll-padding-right in px, pt, cm, etc. Negative values are not allowed
% : specifies the padding in percent of the width of the containing element
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
Scroll-padding-right property is set on the container, so that the snap position of child elements is offset by a distance to the right of the container.
In this case, snap position is set to end in x direction, so the element in focus should snap into place at the very right of the container. But instead, because of the scroll-padding-right value, the element in focus is offset by a 2vw distance from the left side of the container to the child element.
code:
<div>
<p>Scroll-padding-right property is set on the container, so that the snap
position of child elements is offset by a distance to the right of the
container.</p>
<p>In this case, snap position is set to end in x direction, so the element
in focus should snap into place at the very right of the container. But instead,
because of the scroll-padding-right value, the element in focus is offset by a
2vw distance from the left side of the container to the child element.</p>
<div id="container-U">
<div class="blue-U"></div>
<div class="green-U"></div>
<div class="blue-U"></div>
<div class="green-U"></div>
<div class="blue-U"></div>
<div class="green-U"></div>
<div class="blue-U"></div>
</div>
</div>
<style>
#container-U {width: 80%; aspect-ratio: 2/1; margin: auto; border: solid black 0.2vw;
overflow-x: scroll; overflow-y: hidden; white-space: nowrap;
scroll-snap-type: x mandatory; scroll-padding-right: 2vw;}
.blue-U {background-color: lightblue; height: 95%; aspect-ratio: 3/2;}
.green-U {background-color: lightgreen; height: 80%; aspect-ratio: 4/3;}
.blue-U, .green-U {display: inline-block; margin: 0.2vw;
scroll-snap-align: end;}
</style>
- specifies the distance from the top of the container to the snap position on the child elements.
This property only works if the snap position is placed at the top of the child element.
To see the effect from the scroll-padding-top property, the "scroll-snap-align" property must be set on the child elements, and the "scroll-padding-top" and the "scroll-snap-type" properties must be set on the parent element.
CSS syntax : scroll-padding-top: auto | value | initial | inherit;
Property values:
auto : default value. The browser calculates the padding
length : specifies scroll-padding-top in px, pt, cm, etc. Negative values are not allowed
% : specifies the padding in percent of the width of the containing element
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
Scroll-padding-top property is set on the container, so that the snap position of child elements is offset by a distance to the top of the container.
In this case, snap position is set to start in y direction, so the element in focus should snap into place at the very top of the container. But instead, because of the scroll-padding-top value, the element in focus is offset by a 2vw distance from the top of the container to the child element.
code:
<div>
<p>Scroll-padding-top property is set on the container, so that the snap
position of child elements is offset by a distance to the top of the
container.</p>
<p>In this case, snap position is set to start in y direction, so the element
in focus should snap into place at the very top of the container. But instead,
because of the scroll-padding-top value, the element in focus is offset by a
2vw distance from the top of the container to the child element.</p>
<div id="container-V">
<div class="blue-V"></div>
<div class="green-V"></div>
<div class="blue-V"></div>
<div class="green-V"></div>
<div class="blue-V"></div>
<div class="green-V"></div>
<div class="blue-V"></div>
</div>
</div>
<style>
#container-V {width: 80%; aspect-ratio: 3/1; margin: auto; border: solid black 0.2vw;
overflow-x: hidden; overflow-y: scroll;scroll-snap-type: y mandatory;
scroll-padding-top: 2vw;}
.blue-V {background-color: lightblue; width: 95%; aspect-ratio: 3/1;}
.green-V {background-color: lightgreen; width: 80%; aspect-ratio: 4/1;}
.blue-V, .green-V {margin: 0.2vw; scroll-snap-align: start;}
</style>
- specifies where elements will snap into focus when you stop scrolling. To achieve scroll snap behaviour, the "scroll-snap-align" property must be set on the child elements, and the "scroll-snap-type" property must be set on the parent element..
CSS syntax : scroll-snap-align: none | start | end | center | block inline | initial | inherit;
Property values:
none : no scroll snap effect. This is default
start : scroll snap at start of elements on x- and y-axis.
end : scroll snap at end of elements on x- and y-axis.
center : scroll snap at center of elements on x- and y-axis.
block inline : two value syntax. First value is how to snap in block direction, and second value is how to snap in the inline direction.
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
Scroll-snap-align property is set on scrollable child elements inside the container, to snap on center position.
Drag the scrollbar horizontally inside the container box, let go, and see the scroll-snap-align center effect.
Click on a box, then navigate through the blue and green boxes with the left and right arrow keys.
code:
<div>
<p>Scroll-snap-align property is set on scrollable child elements inside the
container, to snap on center position.</p>
<p>Drag the scrollbar horizontally inside the container box, let go, and see
the scroll-snap-align center effect.</p>
<p>Click on a box, then navigate through the blue and green boxes with the
left and right arrow keys.</p>
<div id="container-W">
<div class="blue-W"></div>
<div class="green-W"></div>
<div class="blue-W"></div>
<div class="green-W"></div>
<div class="blue-W"></div>
<div class="green-W"></div>
<div class="blue-W"></div>
</div>
</div>
<style>
#container-W {width: 80%; aspect-ratio: 2/1; margin: auto; border: solid black 0.2vw;
overflow-x: scroll; overflow-y: hidden;white-space: nowrap;
scroll-snap-type: y mandatory;}
.blue-W {background-color: lightblue; height: 95%; aspect-ratio: 1/2;}
.green-W {background-color: lightgreen; height: 50%; aspect-ratio: 2/1;}
.blue-W, .green-W {display: inline-block; margin: 0.5vw;
scroll-snap-align: center;}
</style>
- specifies whether to scroll past elements or to stop and snap on the next element.
To control scroll snap stop behaviour, the "scroll-snap-stop" and "scroll-snap-align" properties must be set on the child elements, and the "scroll-snap-type" property must be set on the parent element.
To see the effect from scroll-snap-stop property, basic scroll snap behaviour must first be established: Scroll-snap-align property is set on child elements to snap on center position, and scroll-snap-type property is set on container to snap vertically.
Now, with scroll-snap-stop property set to always on child elements, scrolling past the next element is prevented when swiping fast with a trackpad or a touch screen.
You need to use a trackpad or a touch screen to see this effect.
code:
<div>
<p>To see the effect from scroll-snap-stop property, basic scroll snap
behaviour must first be established: Scroll-snap-align property is set on
child elements to snap on center position, and scroll-snap-type property is
set on container to snap vertically.</p>
<p>Now, with scroll-snap-stop property set to always on child elements,
scrolling past the next element is prevented when swiping fast with a
trackpad or a touch screen.</p>
<p>You need to use a trackpad or a touch screen to see this effect.</p>
<div id="container-X">
<div class="blue-X"></div>
<div class="green-X"></div>
<div class="pink-X"></div>
<div class="green-X"></div>
<div class="blue-X"></div>
<div class="pink-X"></div>
<div class="blue-X"></div>
<div class="green-X"></div>
<div class="pink-X"></div>
<div class="blue-X"></div>
<div class="green-X"></div>
</div>
</div>
<style>
#container-X {width: 80%; aspect-ratio: 2/1; margin: auto; border: solid black 0.2vw;
overflow-x: hidden; overflow-y: scroll;scroll-snap-type: y mandatory;}
.blue-X {background-color: lightblue; width: 90%; }
.green-X {background-color: lightgreen; width: 80%; }
.pink-X {background-color: lightpink; width: 70%; }
#container-X > div {margin: 0.5vw; scroll-snap-stop: always;
aspect-ratio: 4/1;}
</style>
- specifies how the elements will snap into focus when you stop scrolling, and in what direction.
To achieve scroll snap behaviour, the "scroll-snap-align" property must be set on the child elements and the "scroll-snap-type" property must be set on the parent element.
CSS syntax : scroll-snap-type: none | x | y | block | inline | both | mandatory | proximity | initial | inherit;
Property values:
none : no scroll snap effect. This is default
x : scroll snap effect is set on x-axis.
y : scroll snap effect is set on y-axis
block : scroll snap effect is set on block direction.
inline : scroll snap effect is set on inline direction
both : scroll snap effect is set on both x- and y-axis.
mandatory : scroll will automatically move to snap point after scroll action is finished
proximity : similar to mandatory, but not as strict. Scroll will automatically move to snap point after scroll action is finished, but inbetween snap points there is an area without the snap effect. Depends on browser parameters.
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
Scroll-snap-type property is set on container element to work on x-axis.
Drag the scrollbar horizontally inside the container box, let go, and see the scroll-snap-align center effect.
Click on a box, then navigate through the blue and green boxes with the left and right arrow keys.
code:
<div>
<p>Scroll-snap-type property is set on container element to work on
x-axis.</p>
<p>Drag the scrollbar horizontally inside the container box, let go,
and see the scroll-snap-align center effect.</p>
<p>Click on a box, then navigate through the blue and green boxes
with the left and right arrow keys.</p>
<div id="container-Y">
<div class="blue-Y"></div>
<div class="green-Y"></div>
<div class="blue-Y"></div>
<div class="green-Y"></div>
<div class="blue-Y"></div>
<div class="green-Y"></div>
<div class="blue-Y"></div>
</div>
</div>
<style>
#container-Y {width: 80%; aspect-ratio: 2/1; margin: auto; border: solid black 0.2vw;
overflow-x: scroll; overflow-y: hidden; white-space: nowrap;
scroll-snap-type: x mandatory;}
.blue-Y {background-color: lightblue; height: 95%; aspect-ratio: 1/2; }
.green-Y {background-color: lightgreen; height: 50%; aspect-ratio: 2.1;}
.blue-Y, .green-Y {display: inline-block; margin: 0.5vw;
scroll-snap-align: center;}
</style>
The location allows to spend your holidays in a nice, attractive, and healthy environment. Facilities and services are focused on families spending a leasure time in an evironment that invites to relax.
scenery
There are also local housing estates on the beach that give guests the unique experience to live in conditions that are similar to those that local people have exprienced for ages.
beach house
The warm and sunny environment makes swimming a natural component of daily life. Bathing facilities are spread allover the place.
bathing room
<>
code:
<div class="pictures">
<div class="scroller_a">
<div class="pic"><img src="../../pics/1.jpg" alt="scenery">
<div class="card">
<p>The location allows to spend your holidays in a nice, attractive, and healthy environment. Facilities and services are focused on families spending a leasure time in an evironment that invites
to relax.</p>
<span>scenery</span>
</div>
</div>
<div class="pic"><img src="../../pics/2.jpg" alt="beach house">
<div class="card">
<p>There are also local housing estates on the beach that give guests the unique experience to live in conditions that are similar to those that local people have exprienced for ages.</p>
<span>beach house</span>
</div>
</div>
<div class="pic"><img src="../../pics/3.jpg" alt="bathing room">
<div class="card">
<p>The warm and sunny environment makes swimming a natural component of daily life. Bathing facilities are spread allover the place.</p>
<span>bathing room</span>
</div>
</div>
</div>
<span class="btn prev"><</span>
<span class="btn next">></span>
</div>
<style>
.pictures { max-width: 90vw; margin: auto; padding: 5vw; text-align: center; position: relative; background-color: white;}
.scroller_a {overflow-x: scroll; display: flex;scroll-snap-type: x mandatory; }
.pic {min-width: 100%;min-height: 25vw; background-color: white; scroll-snap-align: center;margin-bottom: 1vw; padding: 5vw; }
.pic img {margin: 1.5vw auto 3vw; width: 35vw;height: 35vw; border: solid 0.2vw lightgrey;
border-radius: 25%; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);z-index: 2;}
.card { background-color: rgb(237, 242, 247);padding: 80px 40px 40px; border-radius: 10px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); z-index: 1; }
.card p {font-style: italic; line-height: 1.6; }
.card span {display: block; margin-top: 2vw; color: teal; font-weight: bold; letter-spacing: 0.05vw; text-transform: uppercase; }
.pictures .btn {position: absolute;top: 50%; height: 4vw; width: 4vw; border-radius: 2.5vw; background-color: darkblue; z-index: 1;
line-height: 3.5vw; text-align: center; color: white; font-weight: bold;}
.pictures .btn:hover{background-color: rgba(95, 106, 117, 0.5); cursor: pointer;}
.pictures .btn.next {right: 5vw;}
.pictures .btn.prev {left: 5vw;}
@media screen and (max-width: 480px) {
.pic {padding: 0 30px;}
.card {padding: 80px 30px 30px;}
}
</style>
<script>
const pictures = document.querySelector('.pictures');
const scroller = pictures.querySelector('.scroller_a');
const nextBtn = pictures.querySelector('.btn.next');
const prevBtn = pictures.querySelector('.btn.prev');
const itemWidth = pictures.querySelector('.pic').clientWidth;
nextBtn.addEventListener('click', scrollToNextItem);
prevBtn.addEventListener('click', scrollToPrevItem);
function scrollToNextItem() {
if(scroller.scrollLeft <(scroller.scrollWidth - itemWidth))
// scroll position is not at the beginning of last item
scroller.scrollBy({left: itemWidth, top: 0, behavior:'smooth'});
else
// Last item reached. Go back to first item by setting scroll position to 0
scroller.scrollTo({left: 0, top: 0, behavior:'smooth'});
}
function scrollToPrevItem() {
if(scroller.scrollLeft != 0)
// The scroll position is not at the beginning of first item
scroller.scrollBy({left: -itemWidth, top: 0, behavior:'smooth'});
else
// This is the first item. Go to last item by setting scroll position to scroller width
scroller.scrollTo({left: scroller.scrollWidth, top: 0, behavior:'smooth'});
}
</script>
