CSS overscroll-behavior-y Property

Last Updated : 09 Jun, 2023

The overscroll-behavior-y property is used to set the behavior of the browser when the vertical boundary of a scrolling area is reached. This can be used in websites where there are multiple scrolling areas and scrolling one area does not affect the page as a whole. This effect is known as scroll-chaining which can be enabled or disabled accordingly.

Syntax:

overscroll-behavior-y: auto | contain | none | initial | inherit

Property Values:

auto: This is used to set the scrolling behavior to default on all the elements. The whole page will scroll even if the boundary of the element is reached. It is the default value.
contain: It is used to set the scrolling behavior to default only on the element used. No scroll-chaining would occur on the neighboring scrolling areas and the elements behind will not scroll.
none: It is used to prevent scroll-chaining on all elements. The default scroll overflow behavior is also prevented.
initial: It is used to set the over-scroll behavior to the default value.
inherit: It is used to set the scrolling behavior to inherit from the parent.

Example:

html

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | overscroll-behavior-y
    </title>

    <style>
        .container {
            display: flex;
        }

        .main-content {
            width: 200px;
            background-color: lightgreen;
        }

        .smaller-box {
            overscroll-behavior-y: auto;

            height: 100px;
            width: 125px;
            margin: 25px;
            overflow-y: scroll;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>

    <b>CSS | overscroll-behavior-y</b>
    <p>overscroll-behavior-y: auto</p>

    <div class="container">
        <div class="main-content">
            GeeksforGeeks is a computer science
            portal with a huge variety of well
            written and explained computer science
            and programming articles, quizzes and
            interview questions. The portal also
            has dedicated GATE preparation and
            competitive programming sections.<br><br>
            GeeksforGeeks is a computer science
            portal with a huge variety of well
            written and explained computer science
            and programming articles, quizzes and
            interview questions. The portal also
            has dedicated GATE preparation and
            competitive programming sections.
        </div>
        <div class="smaller-box">
            This is a smaller element that is also
            scrollable. The overscroll behavior
            can be used to control if the main
            content behind would scroll when this
            element's vertical boundary is reached.
        </div>
    </div>
</body>
</html>

Output: Scrolling down on the smaller element

auto

Example:

html

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | overscroll-behavior-y
    </title>

    <style>
        .container {
            display: flex;
        }

        .main-content {
            width: 200px;
            background-color: lightgreen;
        }

        .smaller-box {
            overscroll-behavior-y: contain;

            height: 100px;
            width: 125px;
            margin: 25px;
            overflow-y: scroll;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>

    <b>CSS | overscroll-behavior-y</b>
    <p>overscroll-behavior-y: contain</p>

    <div class="container">
        <div class="main-content">
            GeeksforGeeks is a computer science
            portal with a huge variety of well
            written and explained computer science
            and programming articles, quizzes and
            interview questions. The portal also
            has dedicated GATE preparation and
            competitive programming sections.<br><br>
            GeeksforGeeks is a computer science
            portal with a huge variety of well
            written and explained computer science
            and programming articles, quizzes and
            interview questions. The portal also
            has dedicated GATE preparation and
            competitive programming sections.
        </div>
        <div class="smaller-box">
            This is a smaller element that is also
            scrollable. The overscroll behavior
            can be used to control if the main
            content behind would scroll when this
            element's vertical boundary is reached.
        </div>
    </div>
</body>
</html>

Output: Scrolling down on the smaller element

contain

Example:

html

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | overscroll-behavior-y
    </title>

    <style>
        .container {
            display: flex;
        }

        .main-content {
            width: 200px;
            background-color: lightgreen;
        }

        .smaller-box {
            overscroll-behavior-y: none;

            height: 100px;
            width: 125px;
            margin: 25px;
            overflow-y: scroll;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>

    <b>CSS | overscroll-behavior-y</b>
    <p>overscroll-behavior-y: none</p>

    <div class="container">
        <div class="main-content">
            GeeksforGeeks is a computer science
            portal with a huge variety of well
            written and explained computer science
            and programming articles, quizzes and
            interview questions. The portal also
            has dedicated GATE preparation and
            competitive programming sections.<br><br>
            GeeksforGeeks is a computer science
            portal with a huge variety of well
            written and explained computer science
            and programming articles, quizzes and
            interview questions. The portal also
            has dedicated GATE preparation and
            competitive programming sections.
        </div>
        <div class="smaller-box">
            This is a smaller element that is also
            scrollable. The overscroll behavior
            can be used to control if the main
            content behind would scroll when this
            element's vertical boundary is reached.
        </div>
    </div>
</body>
</html>

Output: Scrolling down on the smaller element

none

Example:

html

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | overscroll-behavior-y
    </title>

    <style>
        .container {
            display: flex;
        }

        .main-content {
            width: 200px;
            background-color: lightgreen;
        }

        .smaller-box {
            overscroll-behavior-y: initial;

            height: 100px;
            width: 125px;
            margin: 25px;
            overflow-y: scroll;
        }
    </style>
</head>
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>

    <b>CSS | overscroll-behavior-y</b>
    <p>overscroll-behavior-y: initial</p>

    <div class="container">
        <div class="main-content">
            GeeksforGeeks is a computer science
            portal with a huge variety of well
            written and explained computer science
            and programming articles, quizzes and
            interview questions. The portal also
            has dedicated GATE preparation and
            competitive programming sections.<br><br>
            GeeksforGeeks is a computer science
            portal with a huge variety of well
            written and explained computer science
            and programming articles, quizzes and
            interview questions. The portal also
            has dedicated GATE preparation and
            competitive programming sections.
        </div>
        <div class="smaller-box">
            This is a smaller element that is also
            scrollable. The overscroll behavior
            can be used to control if the main
            content behind would scroll when this
            element's vertical boundary is reached.
        </div>
    </div>
</body>
</html>