Simple Scroll Coding Snippet

This coding snippet includes both the HTML and CSS required to display a single scroll on your page. Once the base code is copied and pasted, it’s all up to you to position and align where you’d like your scroll – and, of course, how you’d like it to look!

HTML:
<div id="simplescroll">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer venenatis enim est, ac imperdiet eros bibendum tincidunt. Aliquam interdum dapibus facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper maximus dui, sit amet volutpat massa varius nec. Sed nec est at lacus sodales condimentum non ullamcorper lacus. Donec tristique velit at nisl elementum, in congue nulla finibus. Nullam efficitur velit in augue scelerisque, eu semper justo rhoncus. Vivamus congue dapibus enim quis faucibus. Aliquam nec magna a nisi vehicula bibendum. Praesent at purus cursus, rhoncus risus vitae, vulputate augue. Proin sit amet ipsum id nisl mollis sagittis in eget turpis. Maecenas sit amet commodo urna, et volutpat ipsum.</p>

<p>Praesent condimentum, purus non vulputate tincidunt, velit ante sagittis erat, nec viverra sem ipsum vitae nisi. Nulla viverra libero ante, sit amet pharetra sem accumsan vel. Vivamus nisl est, tristique eget lorem ut, mollis dignissim ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent fermentum enim id urna sagittis fringilla. Pellentesque et dui in libero consectetur egestas vel ut tellus. Proin gravida malesuada ante, vel blandit dolor pellentesque sit amet. Sed eget libero velit. Suspendisse accumsan, erat vel scelerisque vulputate, justo metus lacinia erat, nec facilisis arcu ex quis enim.</p>

<p>Suspendisse potenti. Vivamus faucibus metus vel suscipit rutrum. Mauris imperdiet nibh sit amet erat tristique rutrum. Morbi sagittis faucibus augue vitae tincidunt. Etiam sit amet dui accumsan nisi blandit placerat et in nisl. Fusce eu ornare velit. Phasellus tempor lobortis ipsum id. Cras ut lacus congue, consequat lorem quis, cursus quam. Praesent fermentum dictum scelerisque.</p>

<p>Nullam elit dui, tempor non magna at, lobortis maximus massa. Quisque a luctus nisl, id neque. Integer urna massa, commodo ullamcorper pharetra et, posuere vel dui. Nunc sed tellus eget orci blandit pulvinar ac sit amet urna. Aliquam nunc mauris, euismod at tortor et, mollis hendrerit lectus. Aliquam tristique augue nec quam rutrum tempor. Donec elit ante, efficitur et dapibus finibus, ornare aliquam est. Donec consectetur arcu id malesuada lobortis. Fusce vitae viverra ipsum.</p>

<p>Duis a interdum risus. In ac sollicitudin erat, non faucibus elit. Fusce elit massa, egestas eget maximus rutrum, tincidunt quis risus. Nulla vel convallis orci. Maecenas lacinia nec odio id interdum. Curabitur velit velit, ultricies eu enim nec, bibendum laoreet risus. Donec maximus tortor id est ornare aliquet sed nec orci. Vestibulum sagittis vehicula erat eu tincidunt. Mauris auctor facilisis ipsum, in laoreet arcu vehicula sit amet. Donec ullamcorper placerat velit ac maximus. Aenean nec ex ut enim rutrum sodales vel ultrices felis. Sed aliquet quam et erat malesuada, id fermentum dui pellentesque. Mauris arcu libero, scelerisque non iaculis nec, sodales ut nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;</p>

<p>Vivamus vehicula, ligula a consectetur maximus, massa odio luctus purus, ac accumsan libero ex sed orci. Phasellus quis gravida metus. Donec fermentum vestibulum odio, ut volutpat lectus porttitor ut. Nam ac porta enim. Duis vitae nisi sit amet lacus volutpat aliquet id congue dolor. Proin at lobortis mi. In vitae odio at odio faucibus varius. Sed at aliquet enim. Vivamus ac finibus mauris. Pellentesque bibendum rutrum porta. Nunc in ex sed felis consectetur tempor consectetur non sem. Curabitur magna neque, posuere non massa et, lobortis pharetra mauris. Praesent nec dolor odio.</p>

<p>Fusce sollicitudin ex nec lorem ullamcorper tincidunt. Vestibulum condimentum ultricies augue, id faucibus odio aliquam ultricies. Aenean viverra bibendum nisl, at sollicitudin nunc vehicula a. Duis dolor est, feugiat eu lobortis id, placerat et odio. Sed faucibus iaculis congue. Sed vitae cursus lectus, id condimentum est. Aliquam et enim cursus mi malesuada lobortis. Donec fringilla fermentum eleifend. Donec et libero sed velit feugiat mattis. Vestibulum sed mauris a dui maximus suscipit ut sit amet dui. Cras vulputate, nunc in placerat, lacus ipsum volutpat elit, a malesuada ante lorem at urna. Aenean posuere suscipit ipsum eget aliquet.</p>

</div>
CSS
#simplescroll {
position: relative;
padding: 15px;
width: 450px;
height: 650px;
overflow-y: scroll;
background-color: #A39D91;
border: 1px solid #635F59;
font-family: Times New Roman;
font-size: 12px;
line-height: 12px;
color: #4A4742;}

Simple Expandable Coding Snippet

This coding snippet includes both the HTML and CSS required to display a single expandable on your page. Once the base code is copied and pasted, it’s all up to you to position and align where you’d like your expandable – and, of course, how you’d like it to look!

HTML:
<div id="simpleexpandy">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer venenatis enim est, ac imperdiet eros bibendum tincidunt. Aliquam interdum dapibus facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper maximus dui, sit amet volutpat massa varius nec. Sed nec est at lacus sodales condimentum non ullamcorper lacus. Donec tristique velit at nisl elementum, in congue nulla finibus. Nullam efficitur velit in augue scelerisque, eu semper justo rhoncus. Vivamus congue dapibus enim quis faucibus. Aliquam nec magna a nisi vehicula bibendum. Praesent at purus cursus, rhoncus risus vitae, vulputate augue. Proin sit amet ipsum id nisl mollis sagittis in eget turpis. Maecenas sit amet commodo urna, et volutpat ipsum.</p>

<p>Praesent condimentum, purus non vulputate tincidunt, velit ante sagittis erat, nec viverra sem ipsum vitae nisi. Nulla viverra libero ante, sit amet pharetra sem accumsan vel. Vivamus nisl est, tristique eget lorem ut, mollis dignissim ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent fermentum enim id urna sagittis fringilla. Pellentesque et dui in libero consectetur egestas vel ut tellus. Proin gravida malesuada ante, vel blandit dolor pellentesque sit amet. Sed eget libero velit. Suspendisse accumsan, erat vel scelerisque vulputate, justo metus lacinia erat, nec facilisis arcu ex quis enim.</p>

<p>Suspendisse potenti. Vivamus faucibus metus vel suscipit rutrum. Mauris imperdiet nibh sit amet erat tristique rutrum. Morbi sagittis faucibus augue vitae tincidunt. Etiam sit amet dui accumsan nisi blandit placerat et in nisl. Fusce eu ornare velit. Phasellus tempor lobortis ipsum id. Cras ut lacus congue, consequat lorem quis, cursus quam. Praesent fermentum dictum scelerisque.</p>

<p>Nullam elit dui, tempor non magna at, lobortis maximus massa. Quisque a luctus nisl, id neque. Integer urna massa, commodo ullamcorper pharetra et, posuere vel dui. Nunc sed tellus eget orci blandit pulvinar ac sit amet urna. Aliquam nunc mauris, euismod at tortor et, mollis hendrerit lectus. Aliquam tristique augue nec quam rutrum tempor. Donec elit ante, efficitur et dapibus finibus, ornare aliquam est. Donec consectetur arcu id malesuada lobortis. Fusce vitae viverra ipsum.</p>

</div>
CSS
#simpleexpandy {
position: relative;
padding: 15px;
width: 450px;
background-color: #A39D91;
border: 1px solid #635F59;
font-family: Times New Roman;
font-size: 12px;
line-height: 12px;
color: #4A4742;}

Tip: Have you figured out the main differences between a scroll and an expandable? If not, here they are:
1. Scrolls have both a width and height rule, but expandables only have a width rule.
2. Only scrolls have an overflow rule (this makes it scroll, along with the height rule!)

Pro Tip: Want more than one scroll or expandable? Copy and paste the codes again, but change the names of the elements (secondscroll, secondexpandy, etc.) in both the HTML and CSS – position and align once more! Infinite scrolls and expandables!

%d bloggers like this: