CSS | overscroll-behavior Property

Last Updated : 21 Nov, 2019

The overscroll-behavior property is used to set the behavior of the browser when the boundary of a scrolling area is reached. This property can be used to prevent unwanted scrolling in pages where there are multiple scroll areas. It is a shorthand for the overscroll-behavior-x and overscroll-behavior-y properties.

Syntax:

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

Property Values:

auto: It is used to set the scrolling behavior to default. The whole page along with the element 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 
  </title> 
  <style> 
    .container { 
      display: flex; 
    } 
  
    .main-content { 
      width: 200px; 
      background-color: lightgreen; 
    } 
  
    .smaller-box { 
      overscroll-behavior: auto; 
  
      height: 100px; 
      width: 125px; 
      margin: 25px; 
      overflow-y: scroll; 
    } 
  </style> 
</head> 
<body> 
  <h1 style="color: green"> 
    GeeksforGeeks 
  </h1> 
  <b>CSS | overscroll-behavior</b> 
  <p>overscroll-behavior: 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. Scrolling the element further after it has reached the boundary will not scroll the elements behind it. No scroll-chaining would occur in the neighboring scrolling areas.

Example:

<!DOCTYPE html> 
<html> 
<head> 
  <title> 
    CSS | overscroll-behavior 
  </title> 
  <style> 
    .container { 
      display: flex; 
    } 
  
    .main-content { 
      width: 200px; 
      background-color: lightgreen; 
    } 
  
    .smaller-box { 
      overscroll-behavior: contain; 
  
      height: 100px; 
      width: 125px; 
      margin: 25px; 
      overflow-y: scroll; 
    } 
  </style> 
</head> 
<body> 
  <h1 style="color: green"> 
    GeeksforGeeks 
  </h1> 
  <b>CSS | overscroll-behavior</b> 
  <p>overscroll-behavior: 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 
  </title> 
  <style> 
    .container { 
      display: flex; 
    } 
  
    .main-content { 
      width: 200px; 
      background-color: lightgreen; 
    } 
  
    .smaller-box { 
      overscroll-behavior: none; 
  
      height: 100px; 
      width: 125px; 
      margin: 25px; 
      overflow-y: scroll; 
    } 
  </style> 
</head> 
<body> 
  <h1 style="color: green"> 
    GeeksforGeeks 
  </h1> 
  <b>CSS | overscroll-behavior</b> 
  <p>overscroll-behavior: 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 
  </title> 
  <style> 
    .container { 
      display: flex; 
    } 
  
    .main-content { 
      width: 200px; 
      background-color: lightgreen; 
    } 
  
    .smaller-box { 
      overscroll-behavior: initial; 
  
      height: 100px; 
      width: 125px; 
      margin: 25px; 
      overflow-y: scroll; 
    } 
  </style> 
</head> 
<body> 
  <h1 style="color: green"> 
    GeeksforGeeks 
  </h1> 
  <b>CSS | overscroll-behavior</b> 
  <p>overscroll-behavior: 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> 