How to create content area scrollable instead of the page using CSS ?

Last Updated : 29 Jul, 2024

Making a particular content area scrollable is done by using CSS overflow property. There are different values in overflow property that are listed below.

visible: The property indicates that it can be rendered outside the block box and it is not clipped.
hidden: This property indicates that the overflow is clipped. The rest of the content will be invisible.
auto: If overflow is clipped, then automatically a scroll-bar is added for the rest of the content.
scroll: This property indicates that the scroll-bar is added to see the rest of the content if it is clipped.
initial: This property sets to its default value.
inherit: This property inherits the property from its parent element.

We can disable page scrolling by setting body overflow property to hidden.

In both the examples, we will be using this property to disable the page scrolling.

Example 1: In this example, we use overflow: scroll property to make “div” vertically and horizontally scrollable.

HTML

<!DOCTYPE html> 
<html> 

<head> 
	<meta charset="utf-8"> 

	<meta name="viewport" content= 
		"width=device-width, initial-scale=1"> 
</head> 

<style> 
	body { 
		/* disabling body scrolling */ 
		overflow: hidden; 
		margin: auto; 
		background: white; 
		margin-top: 4%; 
		text-align: center; 
	} 
	
	h1 { 
		color: Green; 
	} 
	
	.scroll { 
		/* enable div scrolling */ 
		overflow: scroll; 
		height: 8%; 
		background-color: aqua; 
		border: 1px black solid; 
		padding: 2%; 
		width: 300px; 
		margin: 0 auto; 
		white-space: nowrap; 
		font-size: large; 
	} 
</style> 

<body> 
	<h1>GeeksforGeeks</h1> 

	<h2> 
		Making content area scrollable 
		instead of the page 
	</h2> 

	<div class="scroll"> 
		It is a good platform to learn programming. 
		It is an educational website. Prepare for 
		the Recruitment drive of product based 
		companies like Microsoft, Amazon, Adobe etc 
		with a free online placement preparation 
		course. The course focuses on various MCQ 
		& Coding question likely to be asked in the 
		interviews & make your upcoming placement 
		season efficient and successful. Also, any 
		geeks can help other geeks by writing 
		articles on the GeeksforGeeks, publishing 
		articles follow few steps that are<br> 
		Articles that need little modification or 
		improvement from reviewers are published 
		first. To quickly get your articles reviewed, 
		please refer existing articles, their 
		formatting style, coding style, and try to 
		make you are close to them. In case you are 
		a beginner, you may refer Guidelines to write 
		an Article. It is a good platform to learn 
		programming. It is an educational website. 
		Prepare for the Recruitment drive of product 
		based companies like Microsoft, Amazon, Adobe 
		etc with<br> a free online placement preparation 
		course. The course focuses on various MCQ's & 
		Coding question likely to be asked in the 
		interviews & make your upcoming placement 
		season efficient and successful. Also, any 
		geeks can help other geeks by<br> writing 
		articles on the GeeksforGeeks, publishing 
		articles follow few steps that are Articles 
		that need little modification or improvement 
		from reviewers are published first. To quickly 
		get your articles reviewed, please refer 
		existing articles, their formatting style, 
		coding style, and try to make you are close 
		to them. In case you are a beginner, you may 
		refer Guidelines to write an Article. 
	</div> 
</body> 

</html>

Output:

Example 2: In this example, use overflow:auto; to make “div” vertically and horizontally scrollable.

HTML

<!DOCTYPE html> 
<html> 

<head> 
	<meta charset="utf-8"> 

	<meta name="viewport" content= 
		"width=device-width, initial-scale=1"> 

	<style> 
		body { 
			/* disabling body scrolling */ 
			overflow: hidden; 
			margin: auto; 
			background: white; 
			margin-top: 4%; 
			text-align: center; 
		} 
		
		h1 { 
			color: Green; 
		} 
		
		.scroll { 
			/* enable div scrolling */ 
			overflow: auto; 
			height: 8%; 
			background-color: aqua; 
			border: 1px black solid; 
			padding: 2%; 
			width: 300px; 
			margin: 0 auto; 
			white-space: nowrap; 
			font-size: large; 
		} 
	</style> 
</head> 

<body> 
	<h1>GeeksforGeeks</h1> 

	<h2> 
		Making content area scrollable 
		instead of the page 
	</h2> 

	<div class="scroll"> 
		It is a good platform to learn programming. 
		It is an educational website. Prepare for 
		the Recruitment drive of product based 
		companies like Microsoft, Amazon, Adobe etc 
		with a free online placement preparation 
		course. The course focuses on various MCQ 
		& Coding question likely to be asked in the 
		interviews & make your upcoming placement 
		season efficient and successful. Also, any 
		geeks can help other geeks by writing 
		articles on the GeeksforGeeks, publishing 
		articles follow few steps that are<br> 
		Articles that need little modification or 
		improvement from reviewers are published 
		first. To quickly get your articles reviewed, 
		please refer existing articles, their 
		formatting style, coding style, and try to 
		make you are close to them. In case you are 
		a beginner, you may refer Guidelines to write 
		an Article. It is a good platform to learn 
		programming. It is an educational website. 
		Prepare for the Recruitment drive of product 
		based companies like Microsoft, Amazon, Adobe 
		etc with<br> a free online placement preparation 
		course. The course focuses on various MCQ's & 
		Coding question likely to be asked in the 
		interviews & make your upcoming placement 
		season efficient and successful. Also, any 
		geeks can help other geeks by<br> writing 
		articles on the GeeksforGeeks, publishing 
		articles follow few steps that are Articles 
		that need little modification or improvement 
		from reviewers are published first. To quickly 
		get your articles reviewed, please refer 
		existing articles, their formatting style, 
		coding style, and try to make you are close 
		to them. In case you are a beginner, you may 
		refer Guidelines to write an Article. 
	</div> 
</body> 

</html>

Output:

Note: You can enable only vertical scrolling by setting overflow-y to scroll and auto and overflow-x to hidden.

Similarly for horizontal scrolling, set overflow-x to scroll or auto and overflow-y to hidden.

Example 3: This example is used only for vertical scrolling of content area.

HTML

<!DOCTYPE html> 
<html> 

<head> 
	<meta charset="utf-8"> 

	<meta name="viewport" content= 
		"width=device-width, initial-scale=1"> 

	<style> 
		body { 
			overflow: hidden; 
			margin: auto; 
			background: white; 
			margin-top: 4%; 
			text-align: center; 
		} 
		
		h1 { 
			color: Green; 
		} 
		
		.scroll { 
			overflow-y: auto; 
			overflow-x: hidden; 
			height: 50%; 
			background-color: aqua; 
			border: 1px black solid; 
			padding: 2%; 
			width: 500px; 
			margin: 0 auto; 
			font-size: large; 
		} 
	</style> 
</head> 

<body> 
	<h1>GeeksforGeeks</h1> 

	<h2> 
		Making content area scrollable 
		instead of the page 
	</h2> 

	<div class="scroll"> 
		It is a good platform to learn programming. 
		It is an educational website. Prepare for 
		the Recruitment drive of product based 
		companies like Microsoft, Amazon, Adobe etc 
		with a free online placement preparation 
		course. The course focuses on various MCQ 
		& Coding question likely to be asked in the 
		interviews & make your upcoming placement 
		season efficient and successful. Also, any 
		geeks can help other geeks by writing 
		articles on the GeeksforGeeks, publishing 
		articles follow few steps that are<br> 
		Articles that need little modification or 
		improvement from reviewers are published 
		first. To quickly get your articles reviewed, 
		please refer existing articles, their 
		formatting style, coding style, and try to 
		make you are close to them. In case you are 
		a beginner, you may refer Guidelines to write 
		an Article. It is a good platform to learn 
		programming. It is an educational website. 
		Prepare for the Recruitment drive of product 
		based companies like Microsoft, Amazon, Adobe 
		etc with<br> a free online placement preparation 
		course. The course focuses on various MCQ's & 
		Coding question likely to be asked in the 
		interviews & make your upcoming placement 
		season efficient and successful. Also, any 
		geeks can help other geeks by<br> writing 
		articles on the GeeksforGeeks, publishing 
		articles follow few steps that are Articles 
		that need little modification or improvement 
		from reviewers are published first. To quickly 
		get your articles reviewed, please refer 
		existing articles, their formatting style, 
		coding style, and try to make you are close 
		to them. In case you are a beginner, you may 
		refer Guidelines to write an Article. 
	</div> 
</body> 

</html>

Output:

How to create Horizontal Scroll Snap Using HTML and CSS ?

chetankhanna767

Improve

Article Tags :

How to create content area scrollable instead of the page using CSS ?

Similar Reads

Thank You!

What kind of Experience do you want to share?