Skip to content
Related Articles

Related Articles

CSS | overscroll-behavior-y Property

View Discussion
Improve Article
Save Article
  • Last Updated : 18 Nov, 2019

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:




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



    <!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
  • none: It is used to prevent scroll-chaining on all elements. The default scroll overflow behavior is also prevented.
    Example:



    <!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
  • initial: It is used to set the overscroll behavior to default value.
    Example:



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

How HTTP POST request work in Node.js?
Recommended Articles
Page :
CSS | transition-property Property
31, Dec 18
How to override the CSS properties of a class using another CSS class ?
27, Sep 19
Difference between CSS Grid and CSS Flexbox
04, Mar 21
Which CSS framework is better Tailwind CSS or Bootstrap ?
28, Oct 21
How to use CSS in different dimension (CSS-in-JS) ?
29, Sep 21
CSS Cheat Sheet - A Basic Guide to CSS
28, Apr 22
CSS table-layout Property
17, Dec 18
CSS text-align Property
17, Dec 18
CSS | border-inline-start-style Property
26, Mar 20
How unicode-bidi property is used in CSS ?
21, Apr 21
CSS | transform-origin Property
24, Jul 19
How to use text overflow property in CSS ?
21, Apr 21
How to disable resizable property of textarea using CSS?
13, Nov 18
How content property is used with :after selector in CSS ?
15, Apr 21
CSS | hanging-punctuation Property
21, Jan 19
CSS font-family Property
24, Dec 18
CSS clip Property
27, Dec 18
CSS font-style Property
27, Dec 18
CSS text-decoration Property
28, Dec 18
CSS object-fit Property
31, Dec 18
CSS | line-height Property
31, Dec 18
CSS list-style Property
31, Dec 18
CSS border-style Property
31, Dec 18
CSS border-color Property
02, Jan 19
Article Contributed By :
https://media.geeksforgeeks.org/auth/avatar.png
sayantanm19
@sayantanm19
Vote for difficulty





Article Tags :
Report Issue

We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
        Privacy Policy

Lightbox

Start Your Coding Journey Now!