HTML | DOM Style overflowX Property
The Style overflowX property in HTML DOM is used to specify the behavior of the content when it overflows an element’s left and right edges. The content may be hidden, shown or a scrollbar according to the value.
Syntax:
- It returns the overflowX property.
object.style.overflowX
- It is used to set the overflowX property.
object.style.overflowX = "hidden|visible|scroll|auto|initial| inherit"
Property Values:
- hidden: The content is clipped and hidden to fit the element. No scrollbars are provided when using this value.
Example:<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
DOM Style overflowX Property
</
title
>
<
style
>
.content {
background-color: lightgreen;
height: 150px;
width: 200px;
white-space: nowrap;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color: green"
>
GeeksforGeeks
</
h1
>
<
b
>DOM Style overflowX Property</
b
>
<
p
>
The overflowX property specifies the behavior of
content when it overflows a block-level element’s
left and right edges.
</
p
>
<
div
class
=
"content"
>
GeeksforGeeks is a computer science portal with a
huge variety of well written and<
br
> explained
computer science and programming articles, quizzes
and interview questions. <
br
>The portal also has
dedicated GATE preparation and competitive
programming sections.
</
div
>
<
button
onclick
=
"setOverflow()"
>
Change overflowX
</
button
>
<!-- Script to set overflowX to hidden -->
<
script
>
function setOverflow() {
elem = document.querySelector('.content');
elem.style.overflowX = 'hidden';
}
</
script
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- Before clicking the button:
- After clicking the button:
- Before clicking the button:
- visible: The content is not clipped and may overflow out to the left or right of the containing element.
Example:<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
DOM Style overflowX Property
</
title
>
<
style
>
.content {
background-color: lightgreen;
height: 150px;
width: 200px;
white-space: nowrap;
overflow-x: hidden;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color: green"
>
GeeksforGeeks
</
h1
>
<
b
>DOM Style overflowX Property</
b
>
<
p
>
The overflowX property specifies the behavior of
content when it overflows a block-level element’s
left and right edges.
</
p
>
<
div
class
=
"content"
>
GeeksforGeeks is a computer science portal with a
huge variety of well written and<
br
> explained
computer science and programming articles, quizzes
and interview questions. <
br
>The portal also has
dedicated GATE preparation and competitive
programming sections.
</
div
>
<
button
onclick
=
"setOverflow()"
>
Change overflowX
</
button
>
<!-- Script to set overflowX to visible -->
<
script
>
function setOverflow() {
elem = document.querySelector('.content');
elem.style.overflowX = 'visible';
}
</
script
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- Before clicking the button:
- After clicking the button:
- Before clicking the button:
- scroll: The content is clipped to fit the element box and a scrollbar is provided help scroll the extra overflowed content. The scrollbar here is added even if the content is not clipped.
Example:<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
DOM Style overflowX Property
</
title
>
<
style
>
.content {
background-color: lightgreen;
height: 150px;
width: 200px;
white-space: nowrap;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color: green"
>
GeeksforGeeks
</
h1
>
<
b
>DOM Style overflowX Property</
b
>
<
p
>
The overflowX property specifies the behavior of
content when it overflows a block-level element’s
left and right edges.
</
p
>
<
div
class
=
"content"
>
GeeksforGeeks is a computer science portal with a
huge variety of well written and<
br
> explained
computer science and programming articles, quizzes
and interview questions. <
br
>The portal also has
dedicated GATE preparation and competitive
programming sections.
</
div
>
<
button
onclick
=
"setOverflow()"
>
Change overflowX
</
button
>
<!-- Script to set overflowX to scroll -->
<
script
>
function setOverflow() {
elem = document.querySelector('.content');
elem.style.overflowX = 'scroll';
}
</
script
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- Before clicking the button:
- After clicking the button:
- Before clicking the button:
- auto: The behavior of auto depends on the content and scrollbars are added only when the content overflows.
Example:<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
DOM Style overflowX Property
</
title
>
<
style
>
.content {
background-color: lightgreen;
height: 150px;
width: 200px;
white-space: nowrap;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color: green"
>
GeeksforGeeks
</
h1
>
<
b
>DOM Style overflowX Property</
b
>
<
p
>
The overflowX property specifies the behavior of
content when it overflows a block-level element’s
left and right edges.
</
p
>
<
div
class
=
"content"
>
GeeksforGeeks is a computer science portal with a
huge variety of well written and<
br
> explained
computer science and programming articles, quizzes
and interview questions. <
br
>The portal also has
dedicated GATE preparation and competitive
programming sections.
</
div
>
<
button
onclick
=
"setOverflow()"
>
Change overflowX
</
button
>
<!-- Script to set overflowX to auto -->
<
script
>
function setOverflow() {
elem = document.querySelector('.content');
elem.style.overflowX = 'auto';
}
</
script
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- Before clicking the button:
- After clicking the button:
- Before clicking the button:
- initial: This is used to set this property to its default value.
Example:<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
DOM Style overflowX Property
</
title
>
<
style
>
.content {
background-color: lightgreen;
height: 150px;
width: 200px;
white-space: nowrap;
/* Setting the overflow-x property to 'scroll' to
observe the effect of initial */
overflow-x: scroll;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color: green"
>
GeeksforGeeks
</
h1
>
<
b
>DOM Style overflowX Property</
b
>
<
p
>
The overflowX property specifies the behavior of
content when it overflows a block-level element’s
left and right edges.
</
p
>
<
div
class
=
"content"
>
GeeksforGeeks is a computer science portal with a
huge variety of well written and<
br
> explained
computer science and programming articles, quizzes
and interview questions. <
br
>The portal also has
dedicated GATE preparation and competitive
programming sections.
</
div
>
<
button
onclick
=
"setOverflow()"
>
Change overflowX
</
button
>
<!-- Script to set overflowX to initial -->
<
script
>
function setOverflow() {
elem = document.querySelector('.content');
elem.style.overflowX = 'initial';
}
</
script
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- Before clicking the button:
- After clicking the button:
- Before clicking the button:
- inherit: It inherits the property from its parent element.
Example:<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
DOM Style overflowX Property
</
title
>
<
style
>
#parent {
/* Setting the overflow-x property
of the parent */
overflow-x: hidden;
}
.content {
background-color: lightgreen;
height: 150px;
width: 200px;
white-space: nowrap;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color: green"
>
GeeksforGeeks
</
h1
>
<
b
>DOM Style overflowX Property</
b
>
<
p
>
The overflowX property specifies the behavior of
content when it overflows a block-level element’s
left and right edges.
</
p
>
<
div
id
=
"parent"
>
<
div
class
=
"content"
>
GeeksforGeeks is a computer science portal
with a huge variety of well written and <
br
>
explained computer science and programming
articles, quizzes and interview questions.
<
br
>The portal also has dedicated GATE
preparation and competitive programming
sections.
</
div
>
</
div
>
<
button
onclick
=
"setOverflow()"
>
Change overflowX
</
button
>
<!-- Script to use overflowX to inherit -->
<
script
>
function setOverflow() {
elem = document.querySelector('.content');
elem.style.overflowX = 'inherit';
}
</
script
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- Before clicking the button:
- After clicking the button:
Supported Browsers: The browser supported by DOM Style overflowX property are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Apple Safari
Recommended Posts:
- HTML | DOM Style top Property
- HTML | DOM Style right Property
- HTML | DOM Style fontStyle Property
- HTML | DOM Style textDecorationColor Property
- HTML DOM | Style pageBreakAfter Property
- HTML | DOM Style animationFillMode Property
- HTML | DOM Style lineHeight Property
- HTML | DOM Style order Property
- HTML | DOM Style columnCount Property
- HTML | DOM Style padding Property
- HTML | DOM Style outlineStyle Property
- HTML | DOM Style transitionProperty Property
- HTML | DOM Style clear Property
- HTML | DOM Style columns Property
- HTML | DOM Style textDecoration Property
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.
- Before clicking the button: