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 make jsfiddle bootstrap ready
- Horizontally Center Align tag in HTML using CSS
- reCAPTCHA Implementation Tutorial
- How to Center Align Image in Bootstrap
- Add scroll to div element in HTML Css
- List of 32 CSS cursors web developers must know about
- align image at middle of div element
- Tutorial : Simple Lightweight Pure CSS based Vertical Navigation Menu
- How to place two div elements next to each other
- CSS Media Query Tutorial for Responsive Mobile First Web Design
- CSS: Apply opacity only for div background and not text
- How to make div or text in html unselectable using CSS
- How to set CSS background-Image Property
More Posts:- Fix SharePoint PowerShell error - The term Get-SPweb is not recognized as the name of a cmdlet function script file or operable program - SharePoint
- Open file using CMD in Notepad++ - NotepadPlusPlus
- How to Restart Mac using Terminal Command - MacOS
- Make Bootstrap Button look like a link - Bootstrap
- Create Custom Android AlertDialog - Android
- Get the current timestamp in Java - Java
- How to export bookmarks from Google Chrome Browser - Chrome
- Indent XML Formatting In Notepad++ - NotepadPlusPlus