Add scroll to div element in HTML Css


Posted on : Tue, 8th Sep 15 01:07 pm (Updated on : Tue, 8th Sep 15 01:07 pm) UTC
Author : Code2care
2314 votes

To add 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 Language : Html/css
<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>


Advertisements





Example 2 : To add horizontal Scroll

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.


horizontal-scroll.html Language : Html/css
<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>


Code2care's mission is to share varied knowledge in technical and non-technical areas gathered during day-to-day learnings and development activities so that our visitors can leverage this portal to find solutions to their queries without re-inventing the wheel. Technical posts include Learnings, Tutorials, Video Tutorials, Code Snippets, Tips-n-tricks.

Follow us : Facebook - Twitter - Google +