To add a scroll to your div element in HTML you need to make use of overflow attribute in Css/Css3 along with max-height to set vertical scroll and max-width for horizontal scrolling.
Example 1: To add vertical Scroll
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
molestie porttitor eros, nec eleifend enim. Aliquam vitae leo vel
lacus fringilla tincidunt. Nunc eu finibus lorem. Aenean vitae
justo dolor. Nulla rutrum, elit at pretium tincidunt, nulla justo
blandit est, nec hendrerit felis dolor vel ex. Sed in ante cursus,
finibus enim mollis, sollicitudin lectus. Aenean gravida accumsan
nisi mollis dapibus.
Aliquam id bibendum nulla. Nunc egestas malesuada venenatis
. Donec finibus elit sit amet bibendum dapibus. Ut consequat varius
tortor, sit amet eleifend nibh lobortis sed. Sed quis felis ornare,
vestibulum nulla a, tristique ante. Vivamus bibendum consequat ex
ac ullamcorper. Donec sodales neque et leo elementum sodales.
Pellentesque nec ante eget lorem blandit mattis. Nam sed blandit nisl.
Integer lacus mauris, iaculis et tellus sed, vehicula laoreet est.
vertical-scroll.html
<div style="max-height: 200px;width:260px;overflow-y: scroll;margin:20px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
molestie porttitor eros, nec eleifend enim. Aliquam vitae leo vel
lacus fringilla tincidunt. Nunc eu finibus lorem. Aenean vitae
justo dolor. Nulla rutrum, elit at pretium tincidunt, nulla justo
blandit est, nec hendrerit felis dolor vel ex. Sed in ante cursus,
finibus enim mollis, sollicitudin lectus. Aenean gravida accumsan
nisi mollis dapibus.
Aliquam id bibendum nulla. Nunc egestas malesuada venenatis
. Donec finibus elit sit amet bibendum dapibus. Ut consequat varius
tortor, sit amet eleifend nibh lobortis sed. Sed quis felis ornare,
vestibulum nulla a, tristique ante. Vivamus bibendum consequat ex
ac ullamcorper. Donec sodales neque et leo elementum sodales.
Pellentesque nec ante eget lorem blandit mattis. Nam sed blandit nisl.
Integer lacus mauris, iaculis et tellus sed, vehicula laoreet est.
</div>
Example 2: To add horizontal Scroll
horizontal-scroll.html
<div style="max-height: 200px;max-width:200px;overflow-x: scroll;overflow-y: hidden;;margin:20px">
<div style='width:300px;height:300px'>
Quisque maximus venenatis urna quis malesuada. Nam rutrum varius purus
et semper. Integer lacus tellus, euismod non lacus quis, ultrices scelerisque
tellus. Mauris ex libero, accumsan in dui ut, tincidunt tempus ante. Nam tincidunt
lorem quis turpis semper placerat. Nunc placerat sollicitudin porta. Nulla facilisi.
Aenean fermentum commodo est, vitae volutpat felis faucibus et. Praesent ac
feugiat magna. Ut efficitur, lacus quis elementum scelerisque, dui enim rhoncus
felis, non rutrum nunc augue at orci. Nunc nec erat vitae mauris lobortis tempus
dignissim at ex. Quisque quis semper nulla. Praesent vehicula a ante mollis
facilisis. Aliquam imperdiet felis nec dolor pharetra rhoncus. Aenean non nisl
malesuada, imperdiet lectus lobortis, egestas dolor.
Quisque sit amet lacinia nisi. Sed tincidunt suscipit nulla, ac ornare libero varius
at. Phasellus mattis lorem quis libero dapibus, vel fringilla libero maximus.
Vestibulum bibendum, enim vel blandit feugiat, arcu magna laoreet massa,
nec molestie felis velit at lacus. Pellentesque in lorem molestie, pharetra
neque et, efficitur lectus. Nulla facilisi. Nunc imperdiet iaculis orci, eu convallis
urna mollis id. Cras nisl diam, congue nec tincidunt vitae, sodales nec orci.
Mauris hendrerit nulla ut posuere feugiat.</div>
</div>
More Posts related to CSS,
- How to create a circular Image using pure CSS Code
- Horizontally Center Align tag in HTML using CSS
- Add scroll to div element in HTML Css
- Change CSS Background Opacity with Examples
- How to make text bold using CSS
- How to place two div elements next to each other
- Vertically Center Text in a DIV Element
- align image at middle of div element
- Tailwind CSS Hello World Example
- How to make div or text in html unselectable using CSS
- Only Chessboard using HTML and CSS Code Example
- Simple CSS Grid Example
- How to set CSS background-Image Property
- CSS Background Opacity with Examples
- reCAPTCHA Implementation Tutorial
- List of 32 CSS cursors web developers must know about
- How to Vertically Center Align Text in a Div using CSS Code Example
- 10 Must Know CSS Border Styles with Examples
- Tutorial : Simple Lightweight Pure CSS based Vertical Navigation Menu
- CSS: Apply opacity only for div background and not text
- Set Falling Show on Website for Christmas using Pure CSS Code
- How to make jsfiddle bootstrap ready
- Elegant CSS Box Shadows Ideas
- Responsive Web Design with CSS Media Queries: A Beginner's Tutorial [Updated for 2023]
- How to Center Align Image in Bootstrap
More Posts:- Fix - Microsoft Windows Error Code: 0xA00F4244 NoCamerasAreAttached - Microsoft
- How to Start Jupyter Notebook on Mac - MacOS
- Steps to Install iOS 17 on your iPhone (Available 18th Sept 2023) - iOS
- [Android Studio] Could not automatically detect an ADB binary - Android-Studio
- Eclipse : Workspace was written with an older version of the product and will be updated - Eclipse
- Keyboard shortcut to close tab in Notepad++ - NotepadPlusPlus
- How to Enable Remote Management using Mac Terminal - MacOS
- Error 404 Tomcat homepage http://localhost:8080/ not displayed - Tomcat