CSS | overscroll-behavior Property
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"
>
w3wiki
</
h1
>
<
b
>CSS | overscroll-behavior</
b
>
<
p
>overscroll-behavior: auto</
p
>
<
div
class
=
"container"
>
<
div
class
=
"main-content"
>
w3wiki 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
>
w3wiki 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: 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"
>
w3wiki
</
h1
>
<
b
>CSS | overscroll-behavior</
b
>
<
p
>overscroll-behavior: contain</
p
>
<
div
class
=
"container"
>
<
div
class
=
"main-content"
>
w3wiki 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
>
w3wiki 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: 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"
>
w3wiki
</
h1
>
<
b
>CSS | overscroll-behavior</
b
>
<
p
>overscroll-behavior: none</
p
>
<
div
class
=
"container"
>
<
div
class
=
"main-content"
>
w3wiki 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
>
w3wiki 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: 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"
>
w3wiki
</
h1
>
<
b
>CSS | overscroll-behavior</
b
>
<
p
>overscroll-behavior: initial</
p
>
<
div
class
=
"container"
>
<
div
class
=
"main-content"
>
w3wiki 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
>
w3wiki 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
-
inherit: It is used to set the scrolling behavior to inherit from the parent.
Supported Browsers: The browsers supported by overscroll-behavior property are listed below:
- Chrome 63.0
- Firefox 59.0
- Edge 18.0
- Opera 50.0
Contact Us