CSS properties - overscroll-behavior-related

revision: March 16, 2024

Content

overscroll-behavior property overscroll-behavior-block property overscroll-behavior-inline property overscroll-behavior-x property overscroll-behavior-y property

overscroll-behavior property

top

- is used to turn off scroll chaining or overscroll affordance on an element when you try to scroll past the scroll boundary.

Scroll chaining is when overscrolling on an element leads to scroll behavior on the parent element. This is default behavior.

Overscroll affordance is a feedback to the user when trying to scroll beyond the scroll boundary. For example, a visual feedback together with a page refresh normally happens on mobile devices when tying to scroll beyond the top of a page.

The overscroll-behavior property is a shorthand for the following properties: "overscroll-behavior-x", "overscroll-behavior-y". Values for the overscroll-behavior property can be set in different ways:

If the overscroll-behavior property has two values : {overscroll-behavior: none contain;} : x-direction: there is no overscroll-behavior; y-direction: there is no scroll chaining, but overscroll affordance is allowed.
If the overscroll-behavior property has one value: {overscroll-behavior: contain;} : there is no scroll chaining in x- or y-direction, but overscroll affordance is allowed

CSS syntax : overscroll-behavior: auto | contain | none | initial | inherit;

Property values:

auto : allows scroll chaining and overscroll affordance behavior. This is default

contain : allows overscroll affordance behavior, but not scroll chaining.

none : does not allow overscroll affordance or scroll chaining behavior./p>

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.overscrollBehavior="none"

example: overscroll-behavior property

Try right box with no overscroll chaining

Put the mouse pointer over the left pink box, scroll down to the bottom of it, continue scrolling, and the scrolling behavior will transfer to the green parent element. This is called overscroll chaining, when overscrolling in one element leads to scrolling behavior in the parent element. Scroll chaining is default behavior.

Note: You might need to move the mouse pointer a little bit inside the pink box after scrolling down to transfer scrolling behavior to the green parent element.

Now, scroll to the top again, move mouse pointer over to the yellow box to the right, scroll down to the bottom of it, continue scrolling, and you will see that scrolling is NOT transferred to the parent element in this case, bacause of the overscroll-behavior property value 'contain' that prevents this from happening.

With overscroll chaining

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque consequat leo eu odio feugiat luctus. Duis vel sagittis ipsum, non dictum nisl. Vivamus sit amet volutpat metus. Nunc tempus, mi ut vehicula porttitor, velit lacus sagittis lorem, sit amet venenatis mauris nibh sit amet urna. Nam nibh mi, commodo id diam eu, congue suscipit nunc. Vestibulum scelerisque dui tempus tincidunt luctus. Donec placerat quis neque vel ultrices. Pellentesque dignissim placerat orci sed cursus. Ut convallis leo sapien, vitae ornare nulla sodales at. Suspendisse ut vestibulum erat. Sed ut fermentum tortor. Integer quis tellus eget nisi pharetra pharetra non vitae magna. Cras ultricies, nulla id imperdiet varius, nisi odio finibus diam, at finibus lacus risus vel dui. Ut euismod consequat libero eu pharetra.

No overscroll chaining

code:

                    <div>
                        <h4>Try right box with no overscroll chaining</h4>
                        <p>Put the mouse pointer over the left pink box.. behavior.</p>
                        <p><strong>Note: </strong>You might need .. element.</p>
                        <p>Now, scroll to the top again, move mouse .. happening.</p>
                        <div id="flex-container">
                            <div id="pinkDiv">
                                <h4>With overscroll chaining</h4>
                                <p>Lorem ipsum dolor sit amet,.. pharetra.</p>
                            </div>
                            <div id="yellowDiv">
                                <h4>No overscroll chaining</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur..u pharetra.</p>
                            </div>
                            <p>Lorem ipsum dolor sit amet, ..tra.</p>
                            <p>Lorem ipsum dolor sit amet, consectetur ..eu pharetra.</p>
                        </div>
                    </div>
                    <style>
                        .box, #pinkDiv, #yellowDiv {margin: 0.5vw 1.5vw; padding: 0.3vw; border: solid black 0.1vw; 
                            overflow: auto;}
                        #flex-container {display: flex; flex-wrap: wrap; background-color: rgb(197, 255, 236); 
                            height: 35vw; width:35; overflow: auto;}
                        #flex-container > div {flex: 1; height: 15vw;}
                        #pinkDiv { background-color: rgb(255, 205, 213);}
                        #yellowDiv { background-color: rgb(255, 255, 161); overscroll-behavior: contain;}
            
                    </style>

overscroll-behavior-block property

top

- is used to turn off scroll chaining or overscroll affordance on an element when you try to scroll past the scroll boundary in the block direction.

The CSS "overscroll-behavior-block" and "overscroll-behavior-inline" properties are very similar to CSS properties "overscroll-behavior-x" and "overscroll-behavior-y", but the "overscroll-behavior-block" and "overscroll-behavior-inline" properties are dependent on block and inline directions.

CSS syntax : overscroll-behavior-block: auto | contain | none | initial | inherit;

Property values:

auto : allows scroll chaining and overscroll affordance behavior. This is default

contain : allows overscroll affordance behavior, but not scroll chaining.

none : does not allow overscroll affordance or scroll chaining behavior./p>

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.overscrollBehaviorBlock="none"

example: overscroll-behavior-block property

Try right box with no overscroll chaining in the block direction

Note: You might need to move the mouse pointer a little bit inside the pink box after scrolling down to transfer scrolling behavior to the green parent element.

With overscroll chaining in the block direction

No overscroll chaining in the block direction

code:

                    <div>
                        <h4>Try right box with no overscroll chaining</h4>
                        <p>Put the mouse pointer over the left pink box.. behavior.</p>
                        <p><strong>Note: </strong>You might need .. element.</p>
                        <p>Now, scroll to the top again, move mouse .. happening.</p>
                        <div id="flex-container-a">
                            <div id="pinkDiv-a">
                                <h4>With overscroll chaining</h4>
                                <p>Lorem ipsum dolor sit amet,.. pharetra.</p>
                            </div>
                            <div id="yellowDiv-a">
                                <h4>No overscroll chaining</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur..u pharetra.</p>
                            </div>
                            <p>Lorem ipsum dolor sit amet, ..tra.</p>
                            <p>Lorem ipsum dolor sit amet, consectetur ..eu pharetra.</p>
                        </div>
                    </div>
                    <style>
                        #pinkDiv-a, #yellowDiv-a {margin: 0.5vw 1.5vw; padding: 0.3vw; border: solid black 0.1vw; 
                            overflow: auto;}
                        #flex-container-a {display: flex; flex-wrap: wrap; background-color: rgb(197, 255, 236); 
                            height: 35vw; width: 35vw; overglow: auto;}
                        #flex-container-a > div {flex: 1; height: 15vw;}
                        #pinkDiv-a { background-color: rgb(255, 205, 213);}
                        #yellowDiv-a { background-color: rgb(255, 255, 161); overscroll-behavior-block: contain;}
            
                    </style>

overscroll-behavior-inline property

top

- is used to turn off scroll chaining or overscroll affordance on an element when you try to scroll past the scroll boundary in the inline direction.

Note: To scroll sideways to trigger overscroll-behavior in the inline direction, you might need to use swipe-gesture on a touchpad or a touchscreen.

The CSS "overscroll-behavior-inline" and "overscroll-behavior-block" properties are very similar to CSS properties "overscroll-behavior-x" and "overscroll-behavior-y", but the "overscroll-behavior-inline" and "overscroll-behavior-block" properties are dependent on inline and block directions.

CSS syntax : overscroll-behavior-inline: auto | contain | none | initial | inherit;

Property values:

auto : allows scroll chaining and overscroll affordance behavior. This is default

contain : allows overscroll affordance behavior, but not scroll chaining.

none : does not allow overscroll affordance or scroll chaining behavior./p>

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.overschrollBehaviorInline="none"

example: overscroll-behavior-inline property

Try yelllow box with no overscroll chaining in the inline direction

Put the mouse pointer over the pink box, scroll right to the end of it, continue scrolling, and the scrolling behavior will transfer to the green parent element. This is called overscroll chaining, when overscrolling on one element leads to scrolling behavior on the parent element. Scroll chaining is default behavior.

Note: To scroll sideways to trigger overscroll-behavior in the inline direction, you might need to use swipe-gesture on a touchpad or a touchscreen.

Now, scroll to the left again, move mouse pointer over to the yellow box, scroll right to the end of it, continue scrolling, and you will see that scrolling is NOT transferred to the parent element in this case, bacause of the overscroll-behavior-inline property value 'contain' that prevents this from happening.

With overscroll chaining in the inline direction

No overscroll chaining in the inline direction

code:

                    <div>
                        <h4>Try yelllow box with no overscroll chaining in the inline direction</h4>
                        <p>Put the mouse pointer over the pink box, ...behavior.</p>
                        <p><strong>Note: </strong>To scroll sideways t...a touchscreen.</p>
                        <p>Now, scroll to the left again, move mous... 'contain' that prevents
                        this from happening.</p>
                        <div id="container-b">
                            <div id="leftDiv">
                                <div id="pinkDiv-b">
                                    <h4>With overscroll chaining in the inline direction </h4>
                                    <p class="view">Lorem ipsum d..od consequat libero eu pharetra.</p>
                                </div>
                                <div id="yellowDiv-b">
                                    <h4>No overscroll chaining in the inline direction</h4>
                                    <p class="view">Lorem ipsum dolor sit amet,...  consequat libero eu pharetra.</p>
                                </div>
                            </div>
                            <p  class="view">Lorem ipsum dolor sit amet, consectetur adipiscing ....eu pharetra.</p>
                            <p  class="view">Lorem ipsum dolor sit amet, co ...eu pharetra.</p>
                        </div>
                    </div>
                    <style>
                    #container-b{margin: 0.5vw 1vw; padding: 0.3vw; border: solid black 0.1vw;
                        background-color: rgb(197, 255, 236); height: 25vw; width: 100%; 
                        overflow:scroll;} 
                    #pinkDiv-b, #yellowDiv-b {margin: 0.5vw 1vw; padding: 0.3vw; border: solid black 0.1vw; 
                        overflow:auto}
                    .view{width: 150%;}
                    #leftDiv{float: left; width: 60%;}
                    #pinkDiv-b, #yellowDiv-b{height: 8vw; width: 80%;} 
                    #pinkDiv-b {background-color: rgb(255, 205, 213);}
                    #yellowDiv-b { background-color: rgb(255, 255, 161); overscroll-behavior-inline: contain;}
            
                    </style>

overscroll-behavior-x property

top

- is used to turn off scroll chaining or overscroll affordance on an element when you try to scroll past the scroll boundary in the x-direction.

Note: to scroll sideways in the x-direction to trigger overscroll-behavior, you might need to use swipe-gesture on a touchpad or a touchscreen..

CSS syntax : overscroll-behavior-x: auto | contain | none | initial | inherit;

Property values:

auto : allows scroll chaining and overscroll affordance behavior. This is default

contain : allows overscroll affordance behavior, but not scroll chaining.

none : does not allow overscroll affordance or scroll chaining behavior./p>

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.overschrollBehaviorX="none"

example: overscroll-behavior-x property

Try yellow box with no overscroll chaining in the x-direction

Note: To scroll sideways in the x-direction to trigger overscroll-behavior, you might need to use swipe-gesture on a touchpad or a touchscreen.

Now, scroll to the left again, move mouse pointer over to the yellow box, scroll right to the end of it, continue scrolling, and you will see that scrolling is NOT transferred to the parent element in this case, bacause of the overscroll-behavior-x property value 'contain' that prevents this from happening.

With overscroll chaining in the x-direction

No overscroll chaining in the x-direction

code:

                    <div>
                        <h4>Try yellow box with no overscroll chaining in the x-direction</h4>
                        <p>Put the mouse pointer ov.. ult behavior.</p>
                        <p><strong>Note: </strong... touchscreen.</p>
                        <p>Now, scroll to the left again, ...happening.</p>
                        <div id="container-D">
                            <div id="leftDiv-D">
                                <div id="pinkDiv-D">
                                    <h4>With overscroll chaining in the x-direction</h4>
                                    <p class="view-D">Lorem ipsum dolor sit amet...euismod consequat libero eu pharetra.</p>
                                </div>
                                <div id="yellowDiv-D">
                                    <h4>No overscroll chaining in the x-direction</h4>
                                    <p class="view-D">Lorem ipsum dolor sit amet... euismod consequat libero eu pharetra.</p>
                                </div>
                            </div>
                            <p class="view-D">Lorem ipsum dolor sit amet... euismod consequat libero eu pharetra.</p>
                            <p class="view-D">Lorem ipsum dolor sit amet...uismod consequat libero eu pharetra.</p>
                            <p class="view-D">Lorem ipsum dolor sit amet... euismod consequat libero eu pharetra.</p>
                        </div>
                    </div>
                    <style>
                        #container-D, #pinkDiv-D, #yellowDiv-D {margin: 1vw; padding: 0.3vw; border: solid black 0.2vw; 
                            overflow: auto;}
                        #container-D {background-color: rgb(197, 255, 236);height: 370px;}
                        #container-D p {width: 200%;}
                        #leftDiv-D {float: left; width: 60%;}
                        #pinkDiv-D, #yellowDiv-D {height: 150px; width: 80%;}
                        #pinkDiv-D {background-color: rgb(255, 205, 213);}
                        #yellowDiv-D {background-color: rgb(255, 255, 161); overscroll-behavior-x: contain;}
                    </style>

overscroll-behavior-y property

top

- is used to turn off scroll chaining or overscroll affordance on an element when you try to scroll past the scroll boundary in the y-direction.

CSS syntax : overscroll-behavior-y: auto | contain | none | initial | inherit;

Property values:

auto : allows scroll chaining and overscroll affordance behavior. This is default

contain : allows overscroll affordance behavior, but not scroll chaining.

none : does not allow overscroll affordance or scroll chaining behavior./p>

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.overschrollBehaviorY="none"

example: overscroll-behavior-y property

Try right box with no overscroll chaining in the y-direction

Note: You might need to move the mouse pointer a little bit inside the pink box after scrolling down to transfer scrolling behavior to the green parent element.

Now, scroll to the top again, move mouse pointer over to the yellow box to the right, scroll down to the bottom of it, continue scrolling, and you will see that scrolling is NOT transferred to the parent element in this case, bacause of the overscroll-behavior-y property value 'contain' that prevents this from happening.

With overscroll chaining

No overscroll chaining

code:

                    <div>
                        <h4>Try right box with no overscroll chaining in the y-direction</h4>
                        <p>Put the mouse pointer...behavior.</p>
                        <p><strong>Note: </strong>You might need...element.</p>
                        <p>Now, scroll to the top again, move mouse pointer...from happening.</p>
                        <div id="flex-container-E">
                            <div id="pinkDiv-E">
                                <h4>With overscroll chaining</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.....</p>
                            </div>
                            <div id="yellowDiv-E">
                                <h4>No overscroll chaining</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ....</p>
                            </div>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ....</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ....</p>
                        </div>
                    </div>
                    <style>
                        #flex-container-E {margin: 0.5vw 1.5vw; padding: 0.3vw;  border: solid black 0.1vw;
                            overflow: auto; }
                        #flex-container-E {display: flex; flex-wrap: wrap; background-color: rgb(197, 255, 236);
                            height: 30vw; }
                        #pinkDiv-E {flex: 1; height: 15vw;background-color: rgb(255, 205, 213);
                            overflow: auto;}
                        #yellowDiv-E {flex: 1; height: 15vw; background-color: rgb(255, 255, 161); 
                            overflow: auto; overscroll-behavior-y: contain;}
                    </style>