CSS scrollbar-color Property

CSS scroll-snap-align property

Last Updated : 25 Jul, 2024

CSS scroll-snap-align property represents the snap position of a box’s snap area within the element’s or container’s snap port.

Syntax:

scroll-snap-align: Keyword_Values;
/* Or */
scroll-snap-align: Global_Values;

Property values: The scroll-snap-align property accepts two values mentioned above and described below:

keyword_Values: This property refers to the keyword values like none, start, end, center, etc.
Global_Values: This property refers to the global values like inherit, initial, unset, etc.

Note: When two property value is set, then the first one is for block and the second one is for inline. Ex. scroll-snap-align: start end;

Example 1: In this example, you can see the effect of scroll-snap-align by scrolling to a point partway between two of the “interfaces” of the example’s content. Here we have used none start as the property value.

html

<!DOCTYPE html>
<html>

<head>
    <style>
        .geeks {
            width: 255px;
            height: 300px;
            border: 4px solid greenyellow;
            scroll-snap-align: none start;
        }

        .Container {
            width: 300px;
            height: 300px;
            border: 5px solid red;
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
            scroll-snap-type: x mandatory;
            scroll-snap-stop: always;
        }
    </style>
</head>

<body>
    <div class="Container">

        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200723131450/img6-300x82.png" 
             class="geeks">

        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200723131449/img5.jpeg" 
             class="geeks">

        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200723131452/img4-300x167.png" 
             class="geeks">

        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200723131450/img6-300x82.png" 
             class="geeks">

    </div>
</body>

</html>

Output:

scrollsnapalign

Output

Browsers Supported:

Chrome 69 and above
Firefox 68 and above
Safari 11 and above
Edge 79 and above
Opera 56 and above

CSS scrollbar-color Property

T

thacker_shahid

Improve

Article Tags :

Similar Reads

CSS align-self Property

The align-self property in CSS is used to align the selected items in the flexible container in many different manners such as flex-end, center, flex-start, etc.Â Syntax: align-self: auto|normal|self-start|self-end|stretch|center |baseline, first baseline, last baseline|flex-start |flex-end|baseline

CSS scroll-behavior Property

This property is used for smooth animation of scroll position instead of a scroll jump. When the user clicks on links it smoothly performs its operation. It is used to visit one link to another link within a scrollable box. Syntax: scroll-behavior: auto|smooth|initial|inherit;Default Value: auto Pro

CSS scrollbar-color Property

The scrollbar-color CSS property sets the colors of the scrollbar track and thumb, allowing for customization of the scrollbar's appearance. The thumb, the draggable part, can be styled globally by setting the property on the root element. Syntaxscrollbar-color: auto | color | dark | light | initial

CSS vertical-align Property

The CSS vertical-align property is used to control the vertical positioning of inline elements or table cells. It helps in aligning images or text within the same line and is commonly used to adjust content in table cells. This property is perfect for aligning elements relative to each other without

CSS text-align Property

The text-align property in CSS controls the horizontal alignment of inline content (such as text) and inline-block elements within their containing block-level element. #content-iframe { width: 100%; height:400px;} @media (min-width: 1785px) {.article--viewer .a-wrapper .content .text #content-ifram

CSS scroll-margin-block-start property

The scroll-margin-block-start property is used to set all the scroll margins to the start side of a scroll element at once. This property defines the margin of the scroll snap area at the start of the block dimension that is used for snapping this box to the snap port. Syntax: scroll-margin-block-st

CSS scroll-margin-top property

The scroll-margin-top property is used to set all the scroll margins to the top of an element at once. The value specified for the scroll-margin-top determines how much of the page that is primarily outside the support should remain visible. Hence, the scroll-margin-top values represent outsets that

CSS scroll-padding-block-start Property

The scroll-padding-block-start property is used to set all the scroll padding to the start of a scroll container or element in the block dimension at once. The start side is the top side for horizontal-tb writing mode and right or left side for vertical-rl or vertical-lr writing mode respectively. W

CSS scroll-margin Property

The scroll-margin property is used to set all the scroll margins of an element at once. The value specified for the scroll-margin determines how much of the page that is primarily outside the support should remain visible. Hence, the scroll-margin values represent outsets that define the scroll snap

CSS scroll-margin-block property

The scroll-margin-block property is used to set all the scroll margins to the start and end of a scroll element at once. This property is shorthand for the scroll-margin-block-start and scroll-margin-block-end property. The selection of the start and end sides depends upon the writing mode. The star