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
- How to place two div elements next to each other
- List of 32 CSS cursors web developers must know about
- How to create a circular Image using pure CSS Code
- How to set CSS background-Image Property
- Tutorial : Simple Lightweight Pure CSS based Vertical Navigation Menu
- Only Chessboard using HTML and CSS Code Example
- Set Falling Show on Website for Christmas using Pure CSS Code
- Horizontally Center Align
- How to Center Align Image in Bootstrap
- align image at middle of div element
- CSS Media Query Tutorial for Responsive Mobile First Web Design
- reCAPTCHA Implementation Tutorial
- Add scroll to div element in HTML Css
- CSS: Apply opacity only for div background and not text
- How to make div or text in html unselectable using CSS
More Posts:
- macOS: Text to Speech Command - say examples - MacOS
- Calculate Volume of Sphere - C-Program
- How to upload file programmatically to SharePoint Document Library using Server Object Model C# .Net - SharePoint
- Fix - 412 Cookies Are Disabled error in Exchange Admin Center when you click hybrid - Microsoft
- The Android Virtual Device is currently running in an emulator and cannot be deleted - Android
- Install Cygwin on Windows PC to learn Objective-C - Objective-C
- Free and easy audio video screen recording using Microsoft PowerPoint - Microsoft
- Run Java Code Every Second - Java