CSS | overscroll-behavior-y Property

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 that 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.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output: Scrolling down on the smaller element
    auto

  • 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.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output: Scrolling down on the smaller element
    contain

  • none: It is used to prevent scroll-chaining on all elements. The default scroll overflow behavior is also prevented.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output: Scrolling down on the smaller element
    none

  • initial: It is used to set the overscroll behavior to default value.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output: Scrolling down on the smaller element
    initial

  • inherit: It is used to set the scrolling behavior to inherit from the parent.

Supported Browsers: The browser supported by overscroll-behavior-y property are listed below:

  • Chrome 63.0
  • Firefox 59.0
  • Opera 50.0


My Personal Notes arrow_drop_up

Im listening

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.