forked from jstoudt/enscroll
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
443 lines (327 loc) · 79.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>The enscroll jQuery Plugin</title>
<meta name="description" content="The enscroll jQuery plugin gives web developers the power to customize scrollbars on their site.">
<!-- Facebook Open Graph Tags -->
<meta property="og:locale" content="en_US">
<meta property="og:title" content="The enscroll jQuery Plugin">
<meta property="og:type" content="website">
<meta property="og:url" content="http://enscrollplugin.com/">
<meta property="og:image" content="http://enscrollplugin.com/images/logo_simple.png">
<meta property="og:description" content="The enscroll jQuery plugin gives web developers the power to customize scrollbars on their site.">
<meta property="fb:admins" content="1491798878">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="author" href="humans.txt">
<link rel="stylesheet" href="css/style.css">
<!-- build:js js/modernizr.min.js -->
<script src="js/libs/respond.src.js"></script>
<script src="js/libs/modernizr-2.6.2.custom.js"></script>
<!-- endbuild -->
</head>
<body>
<header role="banner">
<div class="wrapper">
<a href="/" id="site-logo" class="logo">
<img alt="enscroll" src="images/logo_simple.png" data-large="images/logo.png">
<b>jQuery Plugin</b>
</a>
</div>
</header>
<div class="main" role="main">
<div class="headline">
<h1>Easily Customize Scrollbars!</h1>
<p>Do you have overflowing boxes with scrollbars on your site? Do you wish you could style those scrollbars to offer your users a consistent look & feel across multiple browsers and platforms? Enscroll is a jQuery plugin that gives you the power to replace those scrollbars rendered by the web browser with ones that you design. Either replace the scrollbars with your own image or use custom CSS to style them anyway you desire.</p>
</div>
<aside role="complementary">
<a id="download-btn" class="cta png" href="releases/enscroll-0.4.0.min.js" download="enscroll-0.4.0.min.js" data-action="enscroll-0.4.0">
<h2 class="png">Download</h2>
<b>enscroll-0.4.0.min.js</b>
<b>File Size: 15KB</b>
</a>
<a id="demo-btn" class="cta png" href="#demos" data-tab-link>
<h2 class="png">Demo</h2>
<b>See What It Can Do!</b>
</a>
<ul class="social-plugins">
<!-- Some of these plugins don't play nice with older versions
of IE, so we only render them in the browsers that they do
get along with -->
<!--[if gt IE 6]><!-->
<li>
<a href="https://twitter.com/share" id="twitter-share-button" class="twitter-share-button" data-url="http://enscrollplugin.com/" data-via="Enscroll" data-hashtags="enscroll" data-size="235">Tweet</a>
</li>
<!--<![endif]-->
<!--[if gt IE 7]><!-->
<li>
<div id="g-plusone" class="g-plusone" data-size="medium" data-href="http://enscrollplugin.com/"></div>
</li>
<!--<![endif]-->
</ul>
</aside>
<div class="cabinet">
<div class="folder-tabs">
<a href="#overview" rel="overview" id="overview-tab">Overview</a>
<a href="#features" rel="features" id="features-tab">Features</a>
<a href="#documentation" rel="documentation" id="documentation-tab">Documentation</a>
<a href="#demos" rel="demos" id="demos-tab">Demos</a>
<a class="offset" href="#try-it-now" rel="try-it-now" id="try-it-now-tab">Try It Now!</a>
</div>
<div class="folder-content">
<section id="overview-section">
<h2>Make Websites Look the Way You Designed Them</h2>
<p>A common problem among web developers when writing markup and stylesheets for site designs is the need to style scrollbars as they appear on the designs. Unfortunately, there is no standard way to accomplish this using only HTML & CSS. So, for now we have to resort to a Javascript solution. This means coding the behavior of scrollbars and the view panes they are scrolling. Who has time to do with this and keep project deadlines?</p>
<p>With the enscroll jQuery plugin, being able to write your own styles for those scrollbars is only a matter of a
few lines of Javascript. Here is the short version so you can get started quickly:</p>
<h3>The HTML of the View Pane:</h3>
<div class="snippet-container" style="undefined;"><div class="sh_default snippet-wrap"><div class="snippet-menu sh_sourceCode"><a class="snippet-text sh_url" href="#">text</a><a class="snippet-window sh_url" href="#">pop-up</a></div><pre class="shi_pre sh_html snippet-formatted sh_sourceCode"><ol class="snippet-num"><li><span class="sh_keyword"><div</span> <span class="sh_type">class</span><span class="sh_symbol">=</span><span class="sh_type">"scrollbox"</span><span class="sh_keyword">></span></li><li> <span class="sh_keyword"><h1></span>New Scrolling Window<span class="sh_keyword"></h1></span></li><li> <span class="sh_keyword"><p></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit...<span class="sh_keyword"></p></span></li><li> <span class="sh_keyword"><p></span> ... <span class="sh_keyword"></p></span></li><li> ...</li><li><span class="sh_keyword"></div></span></li></ol></pre><pre class="snippet-textonly sh_sourceCode" style="display:none;" tabindex="0"><div class="scrollbox">
<h1>New Scrolling Window</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<p> ... </p>
...
</div></pre></div></div>
<h3>CSS for the View Pane and Scrollbars:</h3>
<div class="snippet-container" style="undefined;"><div class="sh_default snippet-wrap"><div class="snippet-menu sh_sourceCode"><a class="snippet-text sh_url" href="#">text</a><a class="snippet-window sh_url" href="#">pop-up</a></div><pre class="shi_pre sh_css snippet-formatted sh_sourceCode"><ol class="snippet-num"><li><span class="sh_selector">.scrollbox</span> <span class="sh_cbracket">{</span></li><li> <span class="sh_property">overflow:</span> <span class="sh_value">auto</span>; <span class="sh_comment">/* This is changed by enscroll, but must be defined */</span></li><li> <span class="sh_property">width:</span> <span class="sh_value">368px</span>; <span class="sh_comment">/* The arbitrary width and height of the view pane */</span></li><li> <span class="sh_property">height:</span> <span class="sh_value">550px</span>;</li><li><span class="sh_cbracket">}</span></li><li><span style="display:none;"> </span></li><li><span class="sh_selector">.vertical</span><span class="sh_symbol">-</span>track <span class="sh_cbracket">{</span></li><li> <span class="sh_property">width:</span> <span class="sh_value">16px</span>; <span class="sh_comment">/* How wide is the scrollbar going to be? */</span></li><li> <span class="sh_property">background-color:</span> <span class="sh_string">#aaa</span>; <span class="sh_comment">/* What color should the vertical track be? */</span></li><li><span class="sh_cbracket">}</span></li><li><span style="display:none;"> </span></li><li><span class="sh_selector">.vertical</span><span class="sh_symbol">-</span>handle <span class="sh_cbracket">{</span></li><li> <span class="sh_property">width:</span> <span class="sh_value">16px</span>; <span class="sh_comment">/* How wide is the scrollbar handle? */</span></li><li> <span class="sh_property">background-color:</span> <span class="sh_string">#aaf</span>; <span class="sh_comment">/* What color should the handle be? */</span></li><li><span class="sh_cbracket">}</span></li></ol></pre><pre class="snippet-textonly sh_sourceCode" style="display:none;" tabindex="0">.scrollbox {
overflow: auto; /* This is changed by enscroll, but must be defined */
width: 368px; /* The arbitrary width and height of the view pane */
height: 550px;
}
.vertical-track {
width: 16px; /* How wide is the scrollbar going to be? */
background-color: #aaa; /* What color should the vertical track be? */
}
.vertical-handle {
width: 16px; /* How wide is the scrollbar handle? */
background-color: #aaf; /* What color should the handle be? */
}</pre></div></div>
<h3>And, Finally the Javascript:</h3>
<div class="snippet-container" style="undefined;"><div class="sh_default snippet-wrap"><div class="snippet-menu sh_sourceCode"><a class="snippet-text sh_url" href="#">text</a><a class="snippet-window sh_url" href="#">pop-up</a></div><pre class="shi_pre sh_javascript snippet-formatted sh_sourceCode"><ol class="snippet-num"><li>$<span class="sh_symbol">(</span>document<span class="sh_symbol">).</span><span class="sh_function">ready</span><span class="sh_symbol">(</span><span class="sh_keyword">function</span><span class="sh_symbol">()</span> <span class="sh_cbracket">{</span></li><li> $<span class="sh_symbol">(</span>'<span class="sh_symbol">.</span>scrollbox'<span class="sh_symbol">).</span><span class="sh_function">enscroll</span><span class="sh_symbol">();</span></li><li><span class="sh_cbracket">}</span><span class="sh_symbol">);</span></li></ol></pre><pre class="snippet-textonly sh_sourceCode" style="display:none;" tabindex="0">$(document).ready(function() {
$('.scrollbox').enscroll();
});</pre></div></div>
<p>Don’t forget that you will also need to include the jQuery script on your page, as well as the enscroll script file.</p>
<p>As you have probably already determined, much of the names and styles used above are arbitrary. The class name of the view pane can be changed, as well as the width and height of the view pane. The background colors of the scrollbar track and handle components can also be changed. What is required in the example above is that you provide the view pane with the <i>overflow: auto</i> style. Without this style applied, the plugin will not affect this element. Furthermore, you will need to specify a width for the track and handle.</p>
<p>There are a countless number of designs and styles you can apply to these scrollbars, Start looking at the <a href="#demos" data-tab-link>provided examples</a> to see just a few of the advanced designs that are possible with the enscroll jQuery plugin.</p>
</section>
<section id="features-section">
<h2>Here's a Few Things You Can Do With enscroll</h2>
<ul class="feature-list">
<li>The enscroll element behaves just as any other element with the <i>overflow: auto</i> style applied</li>
<li>You have the option of adding only vertical scrolling (the default), only horizontal scrolling, or both</li>
<li>The minified enscroll Javascript file weighs in at just over 15KB</li>
<li>The position and size of the scrollbars are automatically adjusted as you move the scrolling pane, resize the scrolling pane, or modify the scrolling pane's contents</li>
<li>Support for touch events — full support for mobile devices, tablets and other touchscreen devices — now complete with scroll easing</li>
<li>Optionally, keep the scrollbars hidden until the user hovers over the view pane</li>
<li>Control how far the scrolling elements scrolls when using the mouse wheel or the arrow keys on the keyboard</li>
<li>You control the class names of the scrollbar elements to allow any combination of scrollbar styles you need on the same page</li>
<li>Preserve semantics — you don’t need to add any extra tags in your markup. Since enscroll adds these client-side, you can keep the initial DOM flatter</li>
<li>There are other advanced features you can discover for yourself in the <a href="#documentation" data-tab-link>documentation</a> …</li>
</ul>
</section>
<section id="documentation-section">
<div class="usage">
<h2>Usage</h2>
<p>The usual way to set up the enscroll plugin:</p>
<div class="snippet-container" style="undefined;"><div class="sh_default snippet-wrap"><div class="snippet-menu sh_sourceCode"><a class="snippet-text sh_url" href="#">text</a><a class="snippet-window sh_url" href="#">pop-up</a></div><pre class="shi_pre sh_javascript snippet-formatted sh_sourceCode"><ol class="snippet-num"><li>$<span class="sh_symbol">(</span>'#my_scrolling_pane'<span class="sh_symbol">).</span><span class="sh_function">enscroll</span><span class="sh_symbol">(</span><span class="sh_cbracket">{</span></li><li><span style="display:none;"> </span></li><li> <span class="sh_comment">// a configuration property</span></li><li> showOnHover<span class="sh_symbol">:</span> <span class="sh_keyword">true</span><span class="sh_symbol">,</span></li><li><span style="display:none;"> </span></li><li> <span class="sh_comment">// another configuration property</span></li><li> verticalScrolling<span class="sh_symbol">:</span> <span class="sh_keyword">true</span></li><li><span style="display:none;"> </span></li><li> <span class="sh_comment">// ... more configuration properties ...</span></li><li><span class="sh_cbracket">}</span><span class="sh_symbol">);</span></li></ol></pre><pre class="snippet-textonly sh_sourceCode" style="display:none;" tabindex="0">$('#my_scrolling_pane').enscroll({
// a configuration property
showOnHover: true,
// another configuration property
verticalScrolling: true
// ... more configuration properties ...
});</pre></div></div>
</div>
<h2>Configuration</h2>
<p>A complete list of available configuration properties:</p>
<div id="doc-content"></div>
</section>
<section id="demos-section">
<h2>The Basics and Beyond</h2>
<figure>
<figcaption>The Vertical XP Scrollbars</figcaption>
<div id="scrollpane1" class="scrollpane">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam felis nisl, placerat eget malesuada nec, consequat eu sem. Proin a lectus at leo varius iaculis in at lacus. Integer elementum pellentesque nisl, in fermentum purus faucibus et. Proin ut nisl risus. Ut sit amet est arcu, sed volutpat neque. Sed lacus nulla, rutrum sed accumsan eu, aliquam et magna. Donec leo sapien, congue at vehicula vitae, pharetra sed dui.</p>
<p>Proin sit amet felis at sapien tempor rutrum in in nulla. Donec eu magna magna, in mattis enim. In lacinia massa vulputate nisl rutrum vitae aliquet magna tincidunt. Cras rutrum arcu vitae justo dictum ac imperdiet orci dictum. Sed a velit diam. Proin consectetur sollicitudin massa, non vestibulum justo pretium at. Suspendisse at ipsum eu felis vulputate luctus a vel turpis. Sed lacus tortor, tincidunt sed faucibus non, tempus quis sem. Nam lectus eros, adipiscing sit amet condimentum vel, auctor ac elit. Nam tortor augue, tristique id venenatis sit amet, scelerisque non mi. Proin viverra tincidunt justo sit amet pulvinar. Etiam euismod lacus sed nisl convallis dignissim. In at metus non sapien pulvinar sagittis sit amet in arcu.</p>
<p>Cras ac neque dui. Ut sit amet dui eros, a dictum tortor. Suspendisse hendrerit, elit et pretium dictum, risus lacus faucibus nisl, aliquam sodales risus diam non sem. Duis aliquet massa enim. Fusce consequat tempus justo vitae rutrum. Aliquam euismod lacinia magna eget ultrices. Maecenas vestibulum eros eget elit pellentesque venenatis. Phasellus dictum leo nec enim ultrices dignissim.</p>
<p>Quisque arcu velit, tempor a ultricies consequat, posuere ac purus. Vestibulum eu tristique lacus. Suspendisse feugiat est vel elit pharetra vel tempus quam ullamcorper. Nulla luctus tincidunt dui, eu ultrices massa malesuada eget. Cras imperdiet imperdiet nibh, id rhoncus lacus consectetur at. Nulla varius dolor posuere massa lobortis vestibulum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean vel erat eu erat fringilla porttitor sed sit amet nulla. Praesent facilisis iaculis elit, et porttitor arcu dictum eu. Nullam imperdiet blandit massa ut elementum. Phasellus sodales felis quis orci sodales cursus. Mauris vitae iaculis orci. Nullam consectetur leo quis lacus dapibus venenatis suscipit nisl posuere. Morbi eget mauris nec risus hendrerit placerat.</p>
<p>Fusce at urna augue. Duis ac diam a lacus gravida pretium. Morbi a lacus a nibh tincidunt rhoncus. Suspendisse mi nisl, mattis a varius id, vestibulum eu lectus. Aliquam luctus egestas augue, eu sodales nibh semper vel. Ut laoreet dui eget elit aliquet eget mattis ligula ultricies. Aliquam interdum lorem sit amet nibh facilisis et vulputate nunc aliquam. In consectetur molestie suscipit. Donec sed sapien nec mi cursus lobortis sed vel neque. Aenean eros enim, scelerisque tempus commodo sed, vehicula sagittis libero. In vel nibh nisl, ac placerat mauris. Praesent malesuada, tortor non consectetur luctus, purus odio cursus lacus, at porttitor dolor odio vel sem. Praesent nulla nisi, imperdiet a eleifend euismod, tincidunt gravida magna.</p>
<p>Vestibulum lorem est, vulputate sed vulputate id, bibendum pretium dui. Mauris eget neque sed nulla condimentum porta. Praesent velit lectus, vestibulum sed facilisis in, porttitor eu tellus. Sed magna ligula, scelerisque ac lobortis vitae, varius a ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus at justo quam. Nunc auctor cursus urna, ullamcorper suscipit enim molestie et. Pellentesque mi arcu, ultrices non consectetur ac, aliquam vel elit. Donec aliquam mollis ultricies. Donec tempor, metus vel molestie tincidunt, lorem odio cursus ipsum, elementum aliquam libero nisl eget justo. Pellentesque fringilla elementum lorem, eu imperdiet purus fringilla sit amet. Quisque eget neque nunc. Nunc dapibus justo eget neque tincidunt blandit.</p>
<p>Pellentesque aliquet tellus ut sem placerat mattis. Nullam congue, metus non elementum sodales, augue erat congue mi, eget aliquam purus dui in justo. Vestibulum iaculis molestie sodales. Cras nec ligula quis turpis faucibus elementum in vel purus. Mauris pellentesque sollicitudin ante, eu blandit urna vehicula aliquet. Suspendisse potenti. Vestibulum pretium blandit odio eget fermentum. Etiam vestibulum, neque eget mattis consectetur, mi tortor sagittis ligula, sed imperdiet augue erat a tellus.</p>
<p>Integer mauris lacus, facilisis eget vehicula a, luctus ac quam. Fusce vel tristique eros. Ut ornare faucibus tincidunt. Suspendisse augue nisi, vulputate sed malesuada eget, vehicula sollicitudin dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque tincidunt enim dictum dui hendrerit pharetra. In hac habitasse platea dictumst. Curabitur vehicula aliquet lorem et gravida. Fusce mi ante, placerat et ultricies nec, convallis eget dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis sollicitudin lectus nec elit lacinia aliquam. Etiam vel quam ut lacus vulputate aliquam sit amet ut lorem.</p>
<p>Proin ultrices mauris nunc. Morbi sodales eros ultrices ante vehicula in convallis diam consequat. Donec hendrerit auctor sapien id semper. Aliquam fringilla risus at diam faucibus in interdum lacus porttitor. Nulla id nibh iaculis ipsum feugiat aliquam suscipit vitae sapien. Fusce semper interdum suscipit. Integer ultricies eros sit amet augue ullamcorper faucibus. Donec dolor neque, tempus id blandit molestie, facilisis in libero. Aenean bibendum, purus semper imperdiet viverra, nibh magna viverra odio, a dictum sapien nisl vitae tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat nisl, gravida ut pharetra id, suscipit non ante. Cras tempus nulla id tortor pharetra non lobortis risus tempor. In et scelerisque massa.</p>
<p>Nullam volutpat tempor venenatis. Integer in mi vel nisl fringilla tempus posuere et mauris. Nam ut est quis urna pellentesque euismod. Aenean sagittis tortor eget odio congue eu pellentesque tortor fringilla. Ut odio turpis, aliquet sed elementum vitae, semper ut elit. Curabitur porta pellentesque velit dapibus rutrum. Phasellus adipiscing velit et metus ultrices nec sollicitudin ante aliquam. Etiam elit tellus, pharetra eget malesuada ut, viverra dictum nunc.</p>
<p>Cras euismod elit et purus scelerisque ullamcorper. Curabitur viverra convallis nisi, non eleifend tortor lobortis ac. Phasellus nibh leo, porttitor nec egestas vitae, rutrum id mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Cras volutpat facilisis ultricies. Nunc vel quam dui. Quisque sed porta risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris condimentum tortor eu justo viverra ac hendrerit ipsum tincidunt. Nam convallis condimentum dignissim.</p>
<p>Donec turpis augue, tristique non sollicitudin eget, tincidunt non elit. Mauris ut arcu nulla, sed rhoncus urna. Nam augue arcu, pharetra vitae gravida eu, tempus vel dolor. Nullam sagittis viverra ornare. Nullam sodales fringilla accumsan. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus molestie bibendum nulla sed luctus. Cras sollicitudin bibendum est, id malesuada est rhoncus non. Phasellus lobortis lobortis odio ut convallis. Donec sed molestie dui.</p>
<p>Duis sed orci leo, in tempor lectus. Praesent dapibus, lorem ut iaculis euismod, ipsum felis adipiscing turpis, id placerat ipsum dolor non leo. Cras sit amet orci sed enim aliquet tempor a sit amet leo. Praesent eu diam quam. Pellentesque velit lectus, tempus in imperdiet vitae, convallis et elit. Fusce et augue risus, eget pulvinar nisi. Donec commodo, nulla in tincidunt aliquam, dolor orci bibendum libero, sed vulputate magna eros quis quam. Nam iaculis pulvinar pellentesque.</p>
<p>Cras pretium nulla massa, ut molestie libero. Phasellus quis nisl a risus dignissim fringilla non id sem. Suspendisse potenti. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Fusce gravida elit eget dolor blandit ac porta lacus lacinia. Nulla facilisi. Mauris dapibus volutpat tristique. In porta odio nec metus molestie dapibus. Fusce tincidunt vulputate arcu ut imperdiet.</p>
<p>Nam consequat nibh non neque fringilla dapibus. Donec adipiscing erat ut nunc ullamcorper vulputate. Ut orci justo, euismod eu fringilla a, tincidunt non risus. Vivamus bibendum cursus elementum. Aliquam erat volutpat. Sed ac gravida augue. In elementum, enim quis cursus viverra, sapien nulla dictum sapien, a ornare ante lacus at lacus. In hac habitasse platea dictumst. Integer pretium porta condimentum. Integer elementum bibendum elit quis vehicula. Suspendisse leo nisi, porttitor et ullamcorper nec, pharetra nec enim. Mauris vulputate nulla in dui sollicitudin in pretium dolor ultrices. Etiam quis laoreet velit.</p>
<p>Donec ultricies aliquet sodales. Ut porttitor vehicula leo. Ut congue vulputate leo nec laoreet. Fusce tincidunt sodales posuere. Curabitur eleifend mauris ac justo elementum ut sodales purus congue. Nulla diam sem, molestie vel imperdiet in, ultrices eu tortor. Vestibulum libero augue, scelerisque id rhoncus vel, tempus vel sapien. Vestibulum vehicula laoreet nisl, id ultricies nibh vehicula id. Cras eu justo at lectus elementum iaculis in et leo. Aenean nibh nulla, viverra eu egestas nec, facilisis a massa. Integer aliquam risus ante.</p>
<p>Donec in nunc eu augue luctus vehicula in vel purus. Quisque nec lectus eu purus luctus lacinia nec ornare risus. Etiam nec sapien ac turpis suscipit sodales. Praesent vehicula congue sem, id lobortis ipsum auctor a. Fusce blandit diam eget risus vulputate eget accumsan eros dictum. Nulla vel fringilla lacus. Duis vitae lacus at erat vulputate ultrices. Vivamus nisi erat, viverra et congue vitae, pellentesque eu augue. Nam accumsan dolor quis neque condimentum at lacinia quam pretium. Proin eget accumsan turpis.</p>
<p>Aliquam luctus, lorem ac tristique sodales, eros justo aliquet velit, eu vulputate sapien ante eget urna. Etiam lobortis quam id felis lobortis congue. Nullam ullamcorper, eros id dictum placerat, massa tellus vehicula ligula, in pulvinar nibh leo ut massa. Pellentesque consectetur purus vitae turpis porttitor in iaculis quam porta. Suspendisse suscipit porttitor mattis. Proin posuere, enim ac lacinia ullamcorper, metus nisl semper erat, et condimentum neque sem at metus. Sed vulputate ipsum et sapien facilisis ornare eu sit amet purus. Aliquam eu tincidunt erat. Donec in sem lacus, lobortis tincidunt nulla. Suspendisse potenti. Etiam semper sapien augue. Aenean mollis sagittis enim, ut elementum ligula aliquet ut. Ut cursus mauris eget elit facilisis laoreet. Suspendisse adipiscing tempor ipsum vel tempor.</p>
<p>Phasellus euismod sollicitudin vulputate. Quisque molestie pellentesque libero sit amet sodales. In est erat, sagittis sed vehicula in, blandit id lectus. Morbi sit amet nunc eros, in mollis metus. Aliquam sollicitudin, lorem at ultricies sagittis, ligula mauris porttitor diam, sit amet tincidunt metus diam vel nisl. Aliquam eget tellus nec dui posuere imperdiet ut aliquam velit. Aliquam erat erat, auctor eget aliquam quis, convallis sed velit. Proin leo sem, ultrices quis porttitor eu, viverra viverra magna. Nulla elit tortor, condimentum ac mollis ac, suscipit in justo. Aliquam vehicula blandit gravida. Suspendisse eu ligula et dui vestibulum vulputate eu vel est.</p>
<p>Nunc vehicula quam consectetur lorem ultricies eu pharetra lacus varius. Nunc auctor est a erat interdum sodales. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent et est arcu, ac lacinia risus. Curabitur placerat condimentum erat eget malesuada. Sed id orci ac erat fringilla egestas id id nunc. Sed metus erat, dignissim nec tincidunt eget, adipiscing et sapien. Duis iaculis iaculis augue, quis bibendum sem pharetra ac. Duis tristique erat at risus condimentum suscipit.</p>
<p>Phasellus adipiscing euismod iaculis. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed pulvinar, risus eu consequat pulvinar, orci arcu euismod sapien, id aliquam elit augue vestibulum arcu. Ut vulputate tellus et sapien imperdiet euismod. Nulla ac nisi urna. Curabitur vulputate ante vel quam sodales in adipiscing lacus mollis. Sed ut velit quam, quis pretium dui. Donec lacinia, est auctor blandit mattis, libero ante semper arcu, ac mollis mi magna euismod nisi. Praesent in est orci. Sed ac quam mauris, vitae dignissim nunc. Morbi a purus ac nulla cursus varius. Phasellus sed tellus orci. Quisque venenatis libero nec neque suscipit at tincidunt magna cursus. Proin nulla risus, rutrum ac varius et, tempus vitae est.</p>
<p>Nam auctor arcu sed enim faucibus porta. Curabitur vel sem eros, fermentum convallis tortor. Curabitur eros risus, mattis id viverra aliquam, pretium eu libero. Donec placerat cursus tortor. Etiam eget diam sed sem porta congue. Praesent mattis magna vel massa dapibus a auctor ante dapibus. Nullam egestas, nunc sed tristique gravida, massa ante bibendum ipsum, sed ullamcorper velit leo a dolor. Mauris at lacinia turpis. Nullam dignissim faucibus metus id luctus. In non nibh et quam luctus hendrerit eu eu erat.</p>
<p>Aliquam non risus commodo augue viverra faucibus sed sit amet est. Aliquam erat volutpat. Nam neque magna, facilisis non hendrerit nec, ultrices sed ante. Fusce ultricies neque eu augue ullamcorper venenatis. Quisque et massa id nibh rhoncus condimentum. Proin vel urna vitae purus faucibus dignissim accumsan id massa. Fusce dignissim tortor eu mi porttitor viverra. Suspendisse dignissim urna id urna porttitor tincidunt. Sed purus ligula, condimentum id aliquam at, vehicula quis lectus. Nunc et pellentesque elit. Morbi posuere ullamcorper orci at scelerisque. Mauris condimentum quam at sapien molestie luctus. Sed ullamcorper mi odio, eget lobortis tortor. Suspendisse consequat elit sed risus pulvinar scelerisque. Duis imperdiet urna vitae magna venenatis rutrum. Proin vehicula malesuada risus, eu tempor orci faucibus quis.</p>
<p>Nullam at orci nulla. Etiam vel sem in nibh porttitor venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla luctus sapien quis neque mattis eget lacinia mauris ullamcorper. Aenean dictum pellentesque eros. Nulla facilisi. Curabitur ut sem sit amet mi iaculis luctus ac ac magna. Sed libero mi, suscipit vitae tempus eu, mattis vel sem. Suspendisse at felis arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ullamcorper rhoncus mi sit amet venenatis. Curabitur id orci id leo placerat ultricies vitae et felis.</p>
<p>Ut molestie hendrerit massa, eu facilisis elit pharetra et. Aenean aliquet ornare arcu, vitae porta odio vulputate sed. Fusce at porta eros. Pellentesque posuere sapien suscipit nisi adipiscing viverra vitae ac magna. In suscipit sodales ante in dignissim. Curabitur porta nunc eu dui malesuada congue. Pellentesque lorem justo, placerat id aliquet at, ultrices ut dui. In pharetra sapien nec magna lobortis varius volutpat ante commodo. Phasellus congue feugiat massa, eget varius massa placerat vel. Aliquam erat volutpat. Phasellus at felis mauris. Vivamus non nibh sem. In quis turpis eget nunc imperdiet sollicitudin. Mauris bibendum libero id sapien vehicula auctor. Aenean posuere eleifend elit, at aliquam ipsum dignissim quis. Aenean ultricies porttitor urna, a vulputate ante auctor quis.</p>
</div>
<a href="http://jsfiddle.net/jstoudt/FEd93/embedded/html,css,js,result" class="view-code" rel="#demo-source1">View Code for this Demo <i></i></a>
</figure>
<figure>
<figcaption>Green Vertical & Horizontal Scrollbars</figcaption>
<div id="scrollpane2" class="scrollpane">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam felis nisl, placerat eget malesuada nec, consequat eu sem. Proin a lectus at leo varius iaculis in at lacus. Integer elementum pellentesque nisl, in fermentum purus faucibus et. Proin ut nisl risus. Ut sit amet est arcu, sed volutpat neque. Sed lacus nulla, rutrum sed accumsan eu, aliquam et magna. Donec leo sapien, congue at vehicula vitae, pharetra sed dui.</p>
<p>Proin sit amet felis at sapien tempor rutrum in in nulla. Donec eu magna magna, in mattis enim. In lacinia massa vulputate nisl rutrum vitae aliquet magna tincidunt. Cras rutrum arcu vitae justo dictum ac imperdiet orci dictum. Sed a velit diam. Proin consectetur sollicitudin massa, non vestibulum justo pretium at. Suspendisse at ipsum eu felis vulputate luctus a vel turpis. Sed lacus tortor, tincidunt sed faucibus non, tempus quis sem. Nam lectus eros, adipiscing sit amet condimentum vel, auctor ac elit. Nam tortor augue, tristique id venenatis sit amet, scelerisque non mi. Proin viverra tincidunt justo sit amet pulvinar. Etiam euismod lacus sed nisl convallis dignissim. In at metus non sapien pulvinar sagittis sit amet in arcu.</p>
<p>Cras ac neque dui. Ut sit amet dui eros, a dictum tortor. Suspendisse hendrerit, elit et pretium dictum, risus lacus faucibus nisl, aliquam sodales risus diam non sem. Duis aliquet massa enim. Fusce consequat tempus justo vitae rutrum. Aliquam euismod lacinia magna eget ultrices. Maecenas vestibulum eros eget elit pellentesque venenatis. Phasellus dictum leo nec enim ultrices dignissim.</p>
<p>Quisque arcu velit, tempor a ultricies consequat, posuere ac purus. Vestibulum eu tristique lacus. Suspendisse feugiat est vel elit pharetra vel tempus quam ullamcorper. Nulla luctus tincidunt dui, eu ultrices massa malesuada eget. Cras imperdiet imperdiet nibh, id rhoncus lacus consectetur at. Nulla varius dolor posuere massa lobortis vestibulum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean vel erat eu erat fringilla porttitor sed sit amet nulla. Praesent facilisis iaculis elit, et porttitor arcu dictum eu. Nullam imperdiet blandit massa ut elementum. Phasellus sodales felis quis orci sodales cursus. Mauris vitae iaculis orci. Nullam consectetur leo quis lacus dapibus venenatis suscipit nisl posuere. Morbi eget mauris nec risus hendrerit placerat.</p>
<p>Fusce at urna augue. Duis ac diam a lacus gravida pretium. Morbi a lacus a nibh tincidunt rhoncus. Suspendisse mi nisl, mattis a varius id, vestibulum eu lectus. Aliquam luctus egestas augue, eu sodales nibh semper vel. Ut laoreet dui eget elit aliquet eget mattis ligula ultricies. Aliquam interdum lorem sit amet nibh facilisis et vulputate nunc aliquam. In consectetur molestie suscipit. Donec sed sapien nec mi cursus lobortis sed vel neque. Aenean eros enim, scelerisque tempus commodo sed, vehicula sagittis libero. In vel nibh nisl, ac placerat mauris. Praesent malesuada, tortor non consectetur luctus, purus odio cursus lacus, at porttitor dolor odio vel sem. Praesent nulla nisi, imperdiet a eleifend euismod, tincidunt gravida magna.</p>
<p>Vestibulum lorem est, vulputate sed vulputate id, bibendum pretium dui. Mauris eget neque sed nulla condimentum porta. Praesent velit lectus, vestibulum sed facilisis in, porttitor eu tellus. Sed magna ligula, scelerisque ac lobortis vitae, varius a ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus at justo quam. Nunc auctor cursus urna, ullamcorper suscipit enim molestie et. Pellentesque mi arcu, ultrices non consectetur ac, aliquam vel elit. Donec aliquam mollis ultricies. Donec tempor, metus vel molestie tincidunt, lorem odio cursus ipsum, elementum aliquam libero nisl eget justo. Pellentesque fringilla elementum lorem, eu imperdiet purus fringilla sit amet. Quisque eget neque nunc. Nunc dapibus justo eget neque tincidunt blandit.</p>
<p>Pellentesque aliquet tellus ut sem placerat mattis. Nullam congue, metus non elementum sodales, augue erat congue mi, eget aliquam purus dui in justo. Vestibulum iaculis molestie sodales. Cras nec ligula quis turpis faucibus elementum in vel purus. Mauris pellentesque sollicitudin ante, eu blandit urna vehicula aliquet. Suspendisse potenti. Vestibulum pretium blandit odio eget fermentum. Etiam vestibulum, neque eget mattis consectetur, mi tortor sagittis ligula, sed imperdiet augue erat a tellus.</p>
<p>Integer mauris lacus, facilisis eget vehicula a, luctus ac quam. Fusce vel tristique eros. Ut ornare faucibus tincidunt. Suspendisse augue nisi, vulputate sed malesuada eget, vehicula sollicitudin dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque tincidunt enim dictum dui hendrerit pharetra. In hac habitasse platea dictumst. Curabitur vehicula aliquet lorem et gravida. Fusce mi ante, placerat et ultricies nec, convallis eget dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis sollicitudin lectus nec elit lacinia aliquam. Etiam vel quam ut lacus vulputate aliquam sit amet ut lorem.</p>
<p>Proin ultrices mauris nunc. Morbi sodales eros ultrices ante vehicula in convallis diam consequat. Donec hendrerit auctor sapien id semper. Aliquam fringilla risus at diam faucibus in interdum lacus porttitor. Nulla id nibh iaculis ipsum feugiat aliquam suscipit vitae sapien. Fusce semper interdum suscipit. Integer ultricies eros sit amet augue ullamcorper faucibus. Donec dolor neque, tempus id blandit molestie, facilisis in libero. Aenean bibendum, purus semper imperdiet viverra, nibh magna viverra odio, a dictum sapien nisl vitae tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat nisl, gravida ut pharetra id, suscipit non ante. Cras tempus nulla id tortor pharetra non lobortis risus tempor. In et scelerisque massa.</p>
<p>Nullam volutpat tempor venenatis. Integer in mi vel nisl fringilla tempus posuere et mauris. Nam ut est quis urna pellentesque euismod. Aenean sagittis tortor eget odio congue eu pellentesque tortor fringilla. Ut odio turpis, aliquet sed elementum vitae, semper ut elit. Curabitur porta pellentesque velit dapibus rutrum. Phasellus adipiscing velit et metus ultrices nec sollicitudin ante aliquam. Etiam elit tellus, pharetra eget malesuada ut, viverra dictum nunc.</p>
<p>Cras euismod elit et purus scelerisque ullamcorper. Curabitur viverra convallis nisi, non eleifend tortor lobortis ac. Phasellus nibh leo, porttitor nec egestas vitae, rutrum id mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Cras volutpat facilisis ultricies. Nunc vel quam dui. Quisque sed porta risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris condimentum tortor eu justo viverra ac hendrerit ipsum tincidunt. Nam convallis condimentum dignissim.</p>
<p>Donec turpis augue, tristique non sollicitudin eget, tincidunt non elit. Mauris ut arcu nulla, sed rhoncus urna. Nam augue arcu, pharetra vitae gravida eu, tempus vel dolor. Nullam sagittis viverra ornare. Nullam sodales fringilla accumsan. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus molestie bibendum nulla sed luctus. Cras sollicitudin bibendum est, id malesuada est rhoncus non. Phasellus lobortis lobortis odio ut convallis. Donec sed molestie dui.</p>
<p>Duis sed orci leo, in tempor lectus. Praesent dapibus, lorem ut iaculis euismod, ipsum felis adipiscing turpis, id placerat ipsum dolor non leo. Cras sit amet orci sed enim aliquet tempor a sit amet leo. Praesent eu diam quam. Pellentesque velit lectus, tempus in imperdiet vitae, convallis et elit. Fusce et augue risus, eget pulvinar nisi. Donec commodo, nulla in tincidunt aliquam, dolor orci bibendum libero, sed vulputate magna eros quis quam. Nam iaculis pulvinar pellentesque.</p>
<p>Cras pretium nulla massa, ut molestie libero. Phasellus quis nisl a risus dignissim fringilla non id sem. Suspendisse potenti. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Fusce gravida elit eget dolor blandit ac porta lacus lacinia. Nulla facilisi. Mauris dapibus volutpat tristique. In porta odio nec metus molestie dapibus. Fusce tincidunt vulputate arcu ut imperdiet.</p>
<p>Nam consequat nibh non neque fringilla dapibus. Donec adipiscing erat ut nunc ullamcorper vulputate. Ut orci justo, euismod eu fringilla a, tincidunt non risus. Vivamus bibendum cursus elementum. Aliquam erat volutpat. Sed ac gravida augue. In elementum, enim quis cursus viverra, sapien nulla dictum sapien, a ornare ante lacus at lacus. In hac habitasse platea dictumst. Integer pretium porta condimentum. Integer elementum bibendum elit quis vehicula. Suspendisse leo nisi, porttitor et ullamcorper nec, pharetra nec enim. Mauris vulputate nulla in dui sollicitudin in pretium dolor ultrices. Etiam quis laoreet velit.</p>
<p>Donec ultricies aliquet sodales. Ut porttitor vehicula leo. Ut congue vulputate leo nec laoreet. Fusce tincidunt sodales posuere. Curabitur eleifend mauris ac justo elementum ut sodales purus congue. Nulla diam sem, molestie vel imperdiet in, ultrices eu tortor. Vestibulum libero augue, scelerisque id rhoncus vel, tempus vel sapien. Vestibulum vehicula laoreet nisl, id ultricies nibh vehicula id. Cras eu justo at lectus elementum iaculis in et leo. Aenean nibh nulla, viverra eu egestas nec, facilisis a massa. Integer aliquam risus ante.</p>
<p>Donec in nunc eu augue luctus vehicula in vel purus. Quisque nec lectus eu purus luctus lacinia nec ornare risus. Etiam nec sapien ac turpis suscipit sodales. Praesent vehicula congue sem, id lobortis ipsum auctor a. Fusce blandit diam eget risus vulputate eget accumsan eros dictum. Nulla vel fringilla lacus. Duis vitae lacus at erat vulputate ultrices. Vivamus nisi erat, viverra et congue vitae, pellentesque eu augue. Nam accumsan dolor quis neque condimentum at lacinia quam pretium. Proin eget accumsan turpis.</p>
<p>Aliquam luctus, lorem ac tristique sodales, eros justo aliquet velit, eu vulputate sapien ante eget urna. Etiam lobortis quam id felis lobortis congue. Nullam ullamcorper, eros id dictum placerat, massa tellus vehicula ligula, in pulvinar nibh leo ut massa. Pellentesque consectetur purus vitae turpis porttitor in iaculis quam porta. Suspendisse suscipit porttitor mattis. Proin posuere, enim ac lacinia ullamcorper, metus nisl semper erat, et condimentum neque sem at metus. Sed vulputate ipsum et sapien facilisis ornare eu sit amet purus. Aliquam eu tincidunt erat. Donec in sem lacus, lobortis tincidunt nulla. Suspendisse potenti. Etiam semper sapien augue. Aenean mollis sagittis enim, ut elementum ligula aliquet ut. Ut cursus mauris eget elit facilisis laoreet. Suspendisse adipiscing tempor ipsum vel tempor.</p>
<p>Phasellus euismod sollicitudin vulputate. Quisque molestie pellentesque libero sit amet sodales. In est erat, sagittis sed vehicula in, blandit id lectus. Morbi sit amet nunc eros, in mollis metus. Aliquam sollicitudin, lorem at ultricies sagittis, ligula mauris porttitor diam, sit amet tincidunt metus diam vel nisl. Aliquam eget tellus nec dui posuere imperdiet ut aliquam velit. Aliquam erat erat, auctor eget aliquam quis, convallis sed velit. Proin leo sem, ultrices quis porttitor eu, viverra viverra magna. Nulla elit tortor, condimentum ac mollis ac, suscipit in justo. Aliquam vehicula blandit gravida. Suspendisse eu ligula et dui vestibulum vulputate eu vel est.</p>
<p>Nunc vehicula quam consectetur lorem ultricies eu pharetra lacus varius. Nunc auctor est a erat interdum sodales. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent et est arcu, ac lacinia risus. Curabitur placerat condimentum erat eget malesuada. Sed id orci ac erat fringilla egestas id id nunc. Sed metus erat, dignissim nec tincidunt eget, adipiscing et sapien. Duis iaculis iaculis augue, quis bibendum sem pharetra ac. Duis tristique erat at risus condimentum suscipit.</p>
<p>Phasellus adipiscing euismod iaculis. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed pulvinar, risus eu consequat pulvinar, orci arcu euismod sapien, id aliquam elit augue vestibulum arcu. Ut vulputate tellus et sapien imperdiet euismod. Nulla ac nisi urna. Curabitur vulputate ante vel quam sodales in adipiscing lacus mollis. Sed ut velit quam, quis pretium dui. Donec lacinia, est auctor blandit mattis, libero ante semper arcu, ac mollis mi magna euismod nisi. Praesent in est orci. Sed ac quam mauris, vitae dignissim nunc. Morbi a purus ac nulla cursus varius. Phasellus sed tellus orci. Quisque venenatis libero nec neque suscipit at tincidunt magna cursus. Proin nulla risus, rutrum ac varius et, tempus vitae est.</p>
<p>Nam auctor arcu sed enim faucibus porta. Curabitur vel sem eros, fermentum convallis tortor. Curabitur eros risus, mattis id viverra aliquam, pretium eu libero. Donec placerat cursus tortor. Etiam eget diam sed sem porta congue. Praesent mattis magna vel massa dapibus a auctor ante dapibus. Nullam egestas, nunc sed tristique gravida, massa ante bibendum ipsum, sed ullamcorper velit leo a dolor. Mauris at lacinia turpis. Nullam dignissim faucibus metus id luctus. In non nibh et quam luctus hendrerit eu eu erat.</p>
<p>Aliquam non risus commodo augue viverra faucibus sed sit amet est. Aliquam erat volutpat. Nam neque magna, facilisis non hendrerit nec, ultrices sed ante. Fusce ultricies neque eu augue ullamcorper venenatis. Quisque et massa id nibh rhoncus condimentum. Proin vel urna vitae purus faucibus dignissim accumsan id massa. Fusce dignissim tortor eu mi porttitor viverra. Suspendisse dignissim urna id urna porttitor tincidunt. Sed purus ligula, condimentum id aliquam at, vehicula quis lectus. Nunc et pellentesque elit. Morbi posuere ullamcorper orci at scelerisque. Mauris condimentum quam at sapien molestie luctus. Sed ullamcorper mi odio, eget lobortis tortor. Suspendisse consequat elit sed risus pulvinar scelerisque. Duis imperdiet urna vitae magna venenatis rutrum. Proin vehicula malesuada risus, eu tempor orci faucibus quis.</p>
<p>Nullam at orci nulla. Etiam vel sem in nibh porttitor venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla luctus sapien quis neque mattis eget lacinia mauris ullamcorper. Aenean dictum pellentesque eros. Nulla facilisi. Curabitur ut sem sit amet mi iaculis luctus ac ac magna. Sed libero mi, suscipit vitae tempus eu, mattis vel sem. Suspendisse at felis arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ullamcorper rhoncus mi sit amet venenatis. Curabitur id orci id leo placerat ultricies vitae et felis.</p>
<p>Ut molestie hendrerit massa, eu facilisis elit pharetra et. Aenean aliquet ornare arcu, vitae porta odio vulputate sed. Fusce at porta eros. Pellentesque posuere sapien suscipit nisi adipiscing viverra vitae ac magna. In suscipit sodales ante in dignissim. Curabitur porta nunc eu dui malesuada congue. Pellentesque lorem justo, placerat id aliquet at, ultrices ut dui. In pharetra sapien nec magna lobortis varius volutpat ante commodo. Phasellus congue feugiat massa, eget varius massa placerat vel. Aliquam erat volutpat. Phasellus at felis mauris. Vivamus non nibh sem. In quis turpis eget nunc imperdiet sollicitudin. Mauris bibendum libero id sapien vehicula auctor. Aenean posuere eleifend elit, at aliquam ipsum dignissim quis. Aenean ultricies porttitor urna, a vulputate ante auctor quis.</p>
</div>
<a href="http://jsfiddle.net/jstoudt/hGqKF/embedded/html,css,js,result" class="view-code" rel="#demo-source2">View Code for this Demo <i></i></a>
</figure>
<figure>
<figcaption>Facebook Ticker Scrollbar</figcaption>
<div id="scrollpane3" class="scrollpane">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam felis nisl, placerat eget malesuada nec, consequat eu sem. Proin a lectus at leo varius iaculis in at lacus. Integer elementum pellentesque nisl, in fermentum purus faucibus et. Proin ut nisl risus. Ut sit amet est arcu, sed volutpat neque. Sed lacus nulla, rutrum sed accumsan eu, aliquam et magna. Donec leo sapien, congue at vehicula vitae, pharetra sed dui.</p>
<p>Proin sit amet felis at sapien tempor rutrum in in nulla. Donec eu magna magna, in mattis enim. In lacinia massa vulputate nisl rutrum vitae aliquet magna tincidunt. Cras rutrum arcu vitae justo dictum ac imperdiet orci dictum. Sed a velit diam. Proin consectetur sollicitudin massa, non vestibulum justo pretium at. Suspendisse at ipsum eu felis vulputate luctus a vel turpis. Sed lacus tortor, tincidunt sed faucibus non, tempus quis sem. Nam lectus eros, adipiscing sit amet condimentum vel, auctor ac elit. Nam tortor augue, tristique id venenatis sit amet, scelerisque non mi. Proin viverra tincidunt justo sit amet pulvinar. Etiam euismod lacus sed nisl convallis dignissim. In at metus non sapien pulvinar sagittis sit amet in arcu.</p>
<p>Cras ac neque dui. Ut sit amet dui eros, a dictum tortor. Suspendisse hendrerit, elit et pretium dictum, risus lacus faucibus nisl, aliquam sodales risus diam non sem. Duis aliquet massa enim. Fusce consequat tempus justo vitae rutrum. Aliquam euismod lacinia magna eget ultrices. Maecenas vestibulum eros eget elit pellentesque venenatis. Phasellus dictum leo nec enim ultrices dignissim.</p>
<p>Quisque arcu velit, tempor a ultricies consequat, posuere ac purus. Vestibulum eu tristique lacus. Suspendisse feugiat est vel elit pharetra vel tempus quam ullamcorper. Nulla luctus tincidunt dui, eu ultrices massa malesuada eget. Cras imperdiet imperdiet nibh, id rhoncus lacus consectetur at. Nulla varius dolor posuere massa lobortis vestibulum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean vel erat eu erat fringilla porttitor sed sit amet nulla. Praesent facilisis iaculis elit, et porttitor arcu dictum eu. Nullam imperdiet blandit massa ut elementum. Phasellus sodales felis quis orci sodales cursus. Mauris vitae iaculis orci. Nullam consectetur leo quis lacus dapibus venenatis suscipit nisl posuere. Morbi eget mauris nec risus hendrerit placerat.</p>
<p>Fusce at urna augue. Duis ac diam a lacus gravida pretium. Morbi a lacus a nibh tincidunt rhoncus. Suspendisse mi nisl, mattis a varius id, vestibulum eu lectus. Aliquam luctus egestas augue, eu sodales nibh semper vel. Ut laoreet dui eget elit aliquet eget mattis ligula ultricies. Aliquam interdum lorem sit amet nibh facilisis et vulputate nunc aliquam. In consectetur molestie suscipit. Donec sed sapien nec mi cursus lobortis sed vel neque. Aenean eros enim, scelerisque tempus commodo sed, vehicula sagittis libero. In vel nibh nisl, ac placerat mauris. Praesent malesuada, tortor non consectetur luctus, purus odio cursus lacus, at porttitor dolor odio vel sem. Praesent nulla nisi, imperdiet a eleifend euismod, tincidunt gravida magna.</p>
<p>Vestibulum lorem est, vulputate sed vulputate id, bibendum pretium dui. Mauris eget neque sed nulla condimentum porta. Praesent velit lectus, vestibulum sed facilisis in, porttitor eu tellus. Sed magna ligula, scelerisque ac lobortis vitae, varius a ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus at justo quam. Nunc auctor cursus urna, ullamcorper suscipit enim molestie et. Pellentesque mi arcu, ultrices non consectetur ac, aliquam vel elit. Donec aliquam mollis ultricies. Donec tempor, metus vel molestie tincidunt, lorem odio cursus ipsum, elementum aliquam libero nisl eget justo. Pellentesque fringilla elementum lorem, eu imperdiet purus fringilla sit amet. Quisque eget neque nunc. Nunc dapibus justo eget neque tincidunt blandit.</p>
<p>Pellentesque aliquet tellus ut sem placerat mattis. Nullam congue, metus non elementum sodales, augue erat congue mi, eget aliquam purus dui in justo. Vestibulum iaculis molestie sodales. Cras nec ligula quis turpis faucibus elementum in vel purus. Mauris pellentesque sollicitudin ante, eu blandit urna vehicula aliquet. Suspendisse potenti. Vestibulum pretium blandit odio eget fermentum. Etiam vestibulum, neque eget mattis consectetur, mi tortor sagittis ligula, sed imperdiet augue erat a tellus.</p>
<p>Integer mauris lacus, facilisis eget vehicula a, luctus ac quam. Fusce vel tristique eros. Ut ornare faucibus tincidunt. Suspendisse augue nisi, vulputate sed malesuada eget, vehicula sollicitudin dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque tincidunt enim dictum dui hendrerit pharetra. In hac habitasse platea dictumst. Curabitur vehicula aliquet lorem et gravida. Fusce mi ante, placerat et ultricies nec, convallis eget dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis sollicitudin lectus nec elit lacinia aliquam. Etiam vel quam ut lacus vulputate aliquam sit amet ut lorem.</p>
<p>Proin ultrices mauris nunc. Morbi sodales eros ultrices ante vehicula in convallis diam consequat. Donec hendrerit auctor sapien id semper. Aliquam fringilla risus at diam faucibus in interdum lacus porttitor. Nulla id nibh iaculis ipsum feugiat aliquam suscipit vitae sapien. Fusce semper interdum suscipit. Integer ultricies eros sit amet augue ullamcorper faucibus. Donec dolor neque, tempus id blandit molestie, facilisis in libero. Aenean bibendum, purus semper imperdiet viverra, nibh magna viverra odio, a dictum sapien nisl vitae tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat nisl, gravida ut pharetra id, suscipit non ante. Cras tempus nulla id tortor pharetra non lobortis risus tempor. In et scelerisque massa.</p>
<p>Nullam volutpat tempor venenatis. Integer in mi vel nisl fringilla tempus posuere et mauris. Nam ut est quis urna pellentesque euismod. Aenean sagittis tortor eget odio congue eu pellentesque tortor fringilla. Ut odio turpis, aliquet sed elementum vitae, semper ut elit. Curabitur porta pellentesque velit dapibus rutrum. Phasellus adipiscing velit et metus ultrices nec sollicitudin ante aliquam. Etiam elit tellus, pharetra eget malesuada ut, viverra dictum nunc.</p>
<p>Cras euismod elit et purus scelerisque ullamcorper. Curabitur viverra convallis nisi, non eleifend tortor lobortis ac. Phasellus nibh leo, porttitor nec egestas vitae, rutrum id mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Cras volutpat facilisis ultricies. Nunc vel quam dui. Quisque sed porta risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris condimentum tortor eu justo viverra ac hendrerit ipsum tincidunt. Nam convallis condimentum dignissim.</p>
<p>Donec turpis augue, tristique non sollicitudin eget, tincidunt non elit. Mauris ut arcu nulla, sed rhoncus urna. Nam augue arcu, pharetra vitae gravida eu, tempus vel dolor. Nullam sagittis viverra ornare. Nullam sodales fringilla accumsan. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus molestie bibendum nulla sed luctus. Cras sollicitudin bibendum est, id malesuada est rhoncus non. Phasellus lobortis lobortis odio ut convallis. Donec sed molestie dui.</p>
<p>Duis sed orci leo, in tempor lectus. Praesent dapibus, lorem ut iaculis euismod, ipsum felis adipiscing turpis, id placerat ipsum dolor non leo. Cras sit amet orci sed enim aliquet tempor a sit amet leo. Praesent eu diam quam. Pellentesque velit lectus, tempus in imperdiet vitae, convallis et elit. Fusce et augue risus, eget pulvinar nisi. Donec commodo, nulla in tincidunt aliquam, dolor orci bibendum libero, sed vulputate magna eros quis quam. Nam iaculis pulvinar pellentesque.</p>
<p>Cras pretium nulla massa, ut molestie libero. Phasellus quis nisl a risus dignissim fringilla non id sem. Suspendisse potenti. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Fusce gravida elit eget dolor blandit ac porta lacus lacinia. Nulla facilisi. Mauris dapibus volutpat tristique. In porta odio nec metus molestie dapibus. Fusce tincidunt vulputate arcu ut imperdiet.</p>
<p>Nam consequat nibh non neque fringilla dapibus. Donec adipiscing erat ut nunc ullamcorper vulputate. Ut orci justo, euismod eu fringilla a, tincidunt non risus. Vivamus bibendum cursus elementum. Aliquam erat volutpat. Sed ac gravida augue. In elementum, enim quis cursus viverra, sapien nulla dictum sapien, a ornare ante lacus at lacus. In hac habitasse platea dictumst. Integer pretium porta condimentum. Integer elementum bibendum elit quis vehicula. Suspendisse leo nisi, porttitor et ullamcorper nec, pharetra nec enim. Mauris vulputate nulla in dui sollicitudin in pretium dolor ultrices. Etiam quis laoreet velit.</p>
<p>Donec ultricies aliquet sodales. Ut porttitor vehicula leo. Ut congue vulputate leo nec laoreet. Fusce tincidunt sodales posuere. Curabitur eleifend mauris ac justo elementum ut sodales purus congue. Nulla diam sem, molestie vel imperdiet in, ultrices eu tortor. Vestibulum libero augue, scelerisque id rhoncus vel, tempus vel sapien. Vestibulum vehicula laoreet nisl, id ultricies nibh vehicula id. Cras eu justo at lectus elementum iaculis in et leo. Aenean nibh nulla, viverra eu egestas nec, facilisis a massa. Integer aliquam risus ante.</p>
<p>Donec in nunc eu augue luctus vehicula in vel purus. Quisque nec lectus eu purus luctus lacinia nec ornare risus. Etiam nec sapien ac turpis suscipit sodales. Praesent vehicula congue sem, id lobortis ipsum auctor a. Fusce blandit diam eget risus vulputate eget accumsan eros dictum. Nulla vel fringilla lacus. Duis vitae lacus at erat vulputate ultrices. Vivamus nisi erat, viverra et congue vitae, pellentesque eu augue. Nam accumsan dolor quis neque condimentum at lacinia quam pretium. Proin eget accumsan turpis.</p>
<p>Aliquam luctus, lorem ac tristique sodales, eros justo aliquet velit, eu vulputate sapien ante eget urna. Etiam lobortis quam id felis lobortis congue. Nullam ullamcorper, eros id dictum placerat, massa tellus vehicula ligula, in pulvinar nibh leo ut massa. Pellentesque consectetur purus vitae turpis porttitor in iaculis quam porta. Suspendisse suscipit porttitor mattis. Proin posuere, enim ac lacinia ullamcorper, metus nisl semper erat, et condimentum neque sem at metus. Sed vulputate ipsum et sapien facilisis ornare eu sit amet purus. Aliquam eu tincidunt erat. Donec in sem lacus, lobortis tincidunt nulla. Suspendisse potenti. Etiam semper sapien augue. Aenean mollis sagittis enim, ut elementum ligula aliquet ut. Ut cursus mauris eget elit facilisis laoreet. Suspendisse adipiscing tempor ipsum vel tempor.</p>
<p>Phasellus euismod sollicitudin vulputate. Quisque molestie pellentesque libero sit amet sodales. In est erat, sagittis sed vehicula in, blandit id lectus. Morbi sit amet nunc eros, in mollis metus. Aliquam sollicitudin, lorem at ultricies sagittis, ligula mauris porttitor diam, sit amet tincidunt metus diam vel nisl. Aliquam eget tellus nec dui posuere imperdiet ut aliquam velit. Aliquam erat erat, auctor eget aliquam quis, convallis sed velit. Proin leo sem, ultrices quis porttitor eu, viverra viverra magna. Nulla elit tortor, condimentum ac mollis ac, suscipit in justo. Aliquam vehicula blandit gravida. Suspendisse eu ligula et dui vestibulum vulputate eu vel est.</p>
<p>Nunc vehicula quam consectetur lorem ultricies eu pharetra lacus varius. Nunc auctor est a erat interdum sodales. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent et est arcu, ac lacinia risus. Curabitur placerat condimentum erat eget malesuada. Sed id orci ac erat fringilla egestas id id nunc. Sed metus erat, dignissim nec tincidunt eget, adipiscing et sapien. Duis iaculis iaculis augue, quis bibendum sem pharetra ac. Duis tristique erat at risus condimentum suscipit.</p>
<p>Phasellus adipiscing euismod iaculis. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed pulvinar, risus eu consequat pulvinar, orci arcu euismod sapien, id aliquam elit augue vestibulum arcu. Ut vulputate tellus et sapien imperdiet euismod. Nulla ac nisi urna. Curabitur vulputate ante vel quam sodales in adipiscing lacus mollis. Sed ut velit quam, quis pretium dui. Donec lacinia, est auctor blandit mattis, libero ante semper arcu, ac mollis mi magna euismod nisi. Praesent in est orci. Sed ac quam mauris, vitae dignissim nunc. Morbi a purus ac nulla cursus varius. Phasellus sed tellus orci. Quisque venenatis libero nec neque suscipit at tincidunt magna cursus. Proin nulla risus, rutrum ac varius et, tempus vitae est.</p>
<p>Nam auctor arcu sed enim faucibus porta. Curabitur vel sem eros, fermentum convallis tortor. Curabitur eros risus, mattis id viverra aliquam, pretium eu libero. Donec placerat cursus tortor. Etiam eget diam sed sem porta congue. Praesent mattis magna vel massa dapibus a auctor ante dapibus. Nullam egestas, nunc sed tristique gravida, massa ante bibendum ipsum, sed ullamcorper velit leo a dolor. Mauris at lacinia turpis. Nullam dignissim faucibus metus id luctus. In non nibh et quam luctus hendrerit eu eu erat.</p>
<p>Aliquam non risus commodo augue viverra faucibus sed sit amet est. Aliquam erat volutpat. Nam neque magna, facilisis non hendrerit nec, ultrices sed ante. Fusce ultricies neque eu augue ullamcorper venenatis. Quisque et massa id nibh rhoncus condimentum. Proin vel urna vitae purus faucibus dignissim accumsan id massa. Fusce dignissim tortor eu mi porttitor viverra. Suspendisse dignissim urna id urna porttitor tincidunt. Sed purus ligula, condimentum id aliquam at, vehicula quis lectus. Nunc et pellentesque elit. Morbi posuere ullamcorper orci at scelerisque. Mauris condimentum quam at sapien molestie luctus. Sed ullamcorper mi odio, eget lobortis tortor. Suspendisse consequat elit sed risus pulvinar scelerisque. Duis imperdiet urna vitae magna venenatis rutrum. Proin vehicula malesuada risus, eu tempor orci faucibus quis.</p>
<p>Nullam at orci nulla. Etiam vel sem in nibh porttitor venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla luctus sapien quis neque mattis eget lacinia mauris ullamcorper. Aenean dictum pellentesque eros. Nulla facilisi. Curabitur ut sem sit amet mi iaculis luctus ac ac magna. Sed libero mi, suscipit vitae tempus eu, mattis vel sem. Suspendisse at felis arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ullamcorper rhoncus mi sit amet venenatis. Curabitur id orci id leo placerat ultricies vitae et felis.</p>
<p>Ut molestie hendrerit massa, eu facilisis elit pharetra et. Aenean aliquet ornare arcu, vitae porta odio vulputate sed. Fusce at porta eros. Pellentesque posuere sapien suscipit nisi adipiscing viverra vitae ac magna. In suscipit sodales ante in dignissim. Curabitur porta nunc eu dui malesuada congue. Pellentesque lorem justo, placerat id aliquet at, ultrices ut dui. In pharetra sapien nec magna lobortis varius volutpat ante commodo. Phasellus congue feugiat massa, eget varius massa placerat vel. Aliquam erat volutpat. Phasellus at felis mauris. Vivamus non nibh sem. In quis turpis eget nunc imperdiet sollicitudin. Mauris bibendum libero id sapien vehicula auctor. Aenean posuere eleifend elit, at aliquam ipsum dignissim quis. Aenean ultricies porttitor urna, a vulputate ante auctor quis.</p>
</div>
<a href="http://jsfiddle.net/jstoudt/f2Y5S/embedded/html,css,js,result" class="view-code" rel="#demo-source3">View Code for this Demo <i></i></a>
</figure>
<figure>
<figcaption>Gmail Custom Scrollbar</figcaption>
<div id="scrollpane4" class="scrollpane">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam felis nisl, placerat eget malesuada nec, consequat eu sem. Proin a lectus at leo varius iaculis in at lacus. Integer elementum pellentesque nisl, in fermentum purus faucibus et. Proin ut nisl risus. Ut sit amet est arcu, sed volutpat neque. Sed lacus nulla, rutrum sed accumsan eu, aliquam et magna. Donec leo sapien, congue at vehicula vitae, pharetra sed dui.</p>
<p>Proin sit amet felis at sapien tempor rutrum in in nulla. Donec eu magna magna, in mattis enim. In lacinia massa vulputate nisl rutrum vitae aliquet magna tincidunt. Cras rutrum arcu vitae justo dictum ac imperdiet orci dictum. Sed a velit diam. Proin consectetur sollicitudin massa, non vestibulum justo pretium at. Suspendisse at ipsum eu felis vulputate luctus a vel turpis. Sed lacus tortor, tincidunt sed faucibus non, tempus quis sem. Nam lectus eros, adipiscing sit amet condimentum vel, auctor ac elit. Nam tortor augue, tristique id venenatis sit amet, scelerisque non mi. Proin viverra tincidunt justo sit amet pulvinar. Etiam euismod lacus sed nisl convallis dignissim. In at metus non sapien pulvinar sagittis sit amet in arcu.</p>
<p>Cras ac neque dui. Ut sit amet dui eros, a dictum tortor. Suspendisse hendrerit, elit et pretium dictum, risus lacus faucibus nisl, aliquam sodales risus diam non sem. Duis aliquet massa enim. Fusce consequat tempus justo vitae rutrum. Aliquam euismod lacinia magna eget ultrices. Maecenas vestibulum eros eget elit pellentesque venenatis. Phasellus dictum leo nec enim ultrices dignissim.</p>
<p>Quisque arcu velit, tempor a ultricies consequat, posuere ac purus. Vestibulum eu tristique lacus. Suspendisse feugiat est vel elit pharetra vel tempus quam ullamcorper. Nulla luctus tincidunt dui, eu ultrices massa malesuada eget. Cras imperdiet imperdiet nibh, id rhoncus lacus consectetur at. Nulla varius dolor posuere massa lobortis vestibulum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean vel erat eu erat fringilla porttitor sed sit amet nulla. Praesent facilisis iaculis elit, et porttitor arcu dictum eu. Nullam imperdiet blandit massa ut elementum. Phasellus sodales felis quis orci sodales cursus. Mauris vitae iaculis orci. Nullam consectetur leo quis lacus dapibus venenatis suscipit nisl posuere. Morbi eget mauris nec risus hendrerit placerat.</p>
<p>Fusce at urna augue. Duis ac diam a lacus gravida pretium. Morbi a lacus a nibh tincidunt rhoncus. Suspendisse mi nisl, mattis a varius id, vestibulum eu lectus. Aliquam luctus egestas augue, eu sodales nibh semper vel. Ut laoreet dui eget elit aliquet eget mattis ligula ultricies. Aliquam interdum lorem sit amet nibh facilisis et vulputate nunc aliquam. In consectetur molestie suscipit. Donec sed sapien nec mi cursus lobortis sed vel neque. Aenean eros enim, scelerisque tempus commodo sed, vehicula sagittis libero. In vel nibh nisl, ac placerat mauris. Praesent malesuada, tortor non consectetur luctus, purus odio cursus lacus, at porttitor dolor odio vel sem. Praesent nulla nisi, imperdiet a eleifend euismod, tincidunt gravida magna.</p>
<p>Vestibulum lorem est, vulputate sed vulputate id, bibendum pretium dui. Mauris eget neque sed nulla condimentum porta. Praesent velit lectus, vestibulum sed facilisis in, porttitor eu tellus. Sed magna ligula, scelerisque ac lobortis vitae, varius a ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus at justo quam. Nunc auctor cursus urna, ullamcorper suscipit enim molestie et. Pellentesque mi arcu, ultrices non consectetur ac, aliquam vel elit. Donec aliquam mollis ultricies. Donec tempor, metus vel molestie tincidunt, lorem odio cursus ipsum, elementum aliquam libero nisl eget justo. Pellentesque fringilla elementum lorem, eu imperdiet purus fringilla sit amet. Quisque eget neque nunc. Nunc dapibus justo eget neque tincidunt blandit.</p>
<p>Pellentesque aliquet tellus ut sem placerat mattis. Nullam congue, metus non elementum sodales, augue erat congue mi, eget aliquam purus dui in justo. Vestibulum iaculis molestie sodales. Cras nec ligula quis turpis faucibus elementum in vel purus. Mauris pellentesque sollicitudin ante, eu blandit urna vehicula aliquet. Suspendisse potenti. Vestibulum pretium blandit odio eget fermentum. Etiam vestibulum, neque eget mattis consectetur, mi tortor sagittis ligula, sed imperdiet augue erat a tellus.</p>
<p>Integer mauris lacus, facilisis eget vehicula a, luctus ac quam. Fusce vel tristique eros. Ut ornare faucibus tincidunt. Suspendisse augue nisi, vulputate sed malesuada eget, vehicula sollicitudin dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque tincidunt enim dictum dui hendrerit pharetra. In hac habitasse platea dictumst. Curabitur vehicula aliquet lorem et gravida. Fusce mi ante, placerat et ultricies nec, convallis eget dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis sollicitudin lectus nec elit lacinia aliquam. Etiam vel quam ut lacus vulputate aliquam sit amet ut lorem.</p>
<p>Proin ultrices mauris nunc. Morbi sodales eros ultrices ante vehicula in convallis diam consequat. Donec hendrerit auctor sapien id semper. Aliquam fringilla risus at diam faucibus in interdum lacus porttitor. Nulla id nibh iaculis ipsum feugiat aliquam suscipit vitae sapien. Fusce semper interdum suscipit. Integer ultricies eros sit amet augue ullamcorper faucibus. Donec dolor neque, tempus id blandit molestie, facilisis in libero. Aenean bibendum, purus semper imperdiet viverra, nibh magna viverra odio, a dictum sapien nisl vitae tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat nisl, gravida ut pharetra id, suscipit non ante. Cras tempus nulla id tortor pharetra non lobortis risus tempor. In et scelerisque massa.</p>
<p>Nullam volutpat tempor venenatis. Integer in mi vel nisl fringilla tempus posuere et mauris. Nam ut est quis urna pellentesque euismod. Aenean sagittis tortor eget odio congue eu pellentesque tortor fringilla. Ut odio turpis, aliquet sed elementum vitae, semper ut elit. Curabitur porta pellentesque velit dapibus rutrum. Phasellus adipiscing velit et metus ultrices nec sollicitudin ante aliquam. Etiam elit tellus, pharetra eget malesuada ut, viverra dictum nunc.</p>
<p>Cras euismod elit et purus scelerisque ullamcorper. Curabitur viverra convallis nisi, non eleifend tortor lobortis ac. Phasellus nibh leo, porttitor nec egestas vitae, rutrum id mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Cras volutpat facilisis ultricies. Nunc vel quam dui. Quisque sed porta risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris condimentum tortor eu justo viverra ac hendrerit ipsum tincidunt. Nam convallis condimentum dignissim.</p>
<p>Donec turpis augue, tristique non sollicitudin eget, tincidunt non elit. Mauris ut arcu nulla, sed rhoncus urna. Nam augue arcu, pharetra vitae gravida eu, tempus vel dolor. Nullam sagittis viverra ornare. Nullam sodales fringilla accumsan. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus molestie bibendum nulla sed luctus. Cras sollicitudin bibendum est, id malesuada est rhoncus non. Phasellus lobortis lobortis odio ut convallis. Donec sed molestie dui.</p>
<p>Duis sed orci leo, in tempor lectus. Praesent dapibus, lorem ut iaculis euismod, ipsum felis adipiscing turpis, id placerat ipsum dolor non leo. Cras sit amet orci sed enim aliquet tempor a sit amet leo. Praesent eu diam quam. Pellentesque velit lectus, tempus in imperdiet vitae, convallis et elit. Fusce et augue risus, eget pulvinar nisi. Donec commodo, nulla in tincidunt aliquam, dolor orci bibendum libero, sed vulputate magna eros quis quam. Nam iaculis pulvinar pellentesque.</p>
<p>Cras pretium nulla massa, ut molestie libero. Phasellus quis nisl a risus dignissim fringilla non id sem. Suspendisse potenti. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Fusce gravida elit eget dolor blandit ac porta lacus lacinia. Nulla facilisi. Mauris dapibus volutpat tristique. In porta odio nec metus molestie dapibus. Fusce tincidunt vulputate arcu ut imperdiet.</p>
<p>Nam consequat nibh non neque fringilla dapibus. Donec adipiscing erat ut nunc ullamcorper vulputate. Ut orci justo, euismod eu fringilla a, tincidunt non risus. Vivamus bibendum cursus elementum. Aliquam erat volutpat. Sed ac gravida augue. In elementum, enim quis cursus viverra, sapien nulla dictum sapien, a ornare ante lacus at lacus. In hac habitasse platea dictumst. Integer pretium porta condimentum. Integer elementum bibendum elit quis vehicula. Suspendisse leo nisi, porttitor et ullamcorper nec, pharetra nec enim. Mauris vulputate nulla in dui sollicitudin in pretium dolor ultrices. Etiam quis laoreet velit.</p>
<p>Donec ultricies aliquet sodales. Ut porttitor vehicula leo. Ut congue vulputate leo nec laoreet. Fusce tincidunt sodales posuere. Curabitur eleifend mauris ac justo elementum ut sodales purus congue. Nulla diam sem, molestie vel imperdiet in, ultrices eu tortor. Vestibulum libero augue, scelerisque id rhoncus vel, tempus vel sapien. Vestibulum vehicula laoreet nisl, id ultricies nibh vehicula id. Cras eu justo at lectus elementum iaculis in et leo. Aenean nibh nulla, viverra eu egestas nec, facilisis a massa. Integer aliquam risus ante.</p>
<p>Donec in nunc eu augue luctus vehicula in vel purus. Quisque nec lectus eu purus luctus lacinia nec ornare risus. Etiam nec sapien ac turpis suscipit sodales. Praesent vehicula congue sem, id lobortis ipsum auctor a. Fusce blandit diam eget risus vulputate eget accumsan eros dictum. Nulla vel fringilla lacus. Duis vitae lacus at erat vulputate ultrices. Vivamus nisi erat, viverra et congue vitae, pellentesque eu augue. Nam accumsan dolor quis neque condimentum at lacinia quam pretium. Proin eget accumsan turpis.</p>
<p>Aliquam luctus, lorem ac tristique sodales, eros justo aliquet velit, eu vulputate sapien ante eget urna. Etiam lobortis quam id felis lobortis congue. Nullam ullamcorper, eros id dictum placerat, massa tellus vehicula ligula, in pulvinar nibh leo ut massa. Pellentesque consectetur purus vitae turpis porttitor in iaculis quam porta. Suspendisse suscipit porttitor mattis. Proin posuere, enim ac lacinia ullamcorper, metus nisl semper erat, et condimentum neque sem at metus. Sed vulputate ipsum et sapien facilisis ornare eu sit amet purus. Aliquam eu tincidunt erat. Donec in sem lacus, lobortis tincidunt nulla. Suspendisse potenti. Etiam semper sapien augue. Aenean mollis sagittis enim, ut elementum ligula aliquet ut. Ut cursus mauris eget elit facilisis laoreet. Suspendisse adipiscing tempor ipsum vel tempor.</p>
<p>Phasellus euismod sollicitudin vulputate. Quisque molestie pellentesque libero sit amet sodales. In est erat, sagittis sed vehicula in, blandit id lectus. Morbi sit amet nunc eros, in mollis metus. Aliquam sollicitudin, lorem at ultricies sagittis, ligula mauris porttitor diam, sit amet tincidunt metus diam vel nisl. Aliquam eget tellus nec dui posuere imperdiet ut aliquam velit. Aliquam erat erat, auctor eget aliquam quis, convallis sed velit. Proin leo sem, ultrices quis porttitor eu, viverra viverra magna. Nulla elit tortor, condimentum ac mollis ac, suscipit in justo. Aliquam vehicula blandit gravida. Suspendisse eu ligula et dui vestibulum vulputate eu vel est.</p>
<p>Nunc vehicula quam consectetur lorem ultricies eu pharetra lacus varius. Nunc auctor est a erat interdum sodales. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent et est arcu, ac lacinia risus. Curabitur placerat condimentum erat eget malesuada. Sed id orci ac erat fringilla egestas id id nunc. Sed metus erat, dignissim nec tincidunt eget, adipiscing et sapien. Duis iaculis iaculis augue, quis bibendum sem pharetra ac. Duis tristique erat at risus condimentum suscipit.</p>
<p>Phasellus adipiscing euismod iaculis. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed pulvinar, risus eu consequat pulvinar, orci arcu euismod sapien, id aliquam elit augue vestibulum arcu. Ut vulputate tellus et sapien imperdiet euismod. Nulla ac nisi urna. Curabitur vulputate ante vel quam sodales in adipiscing lacus mollis. Sed ut velit quam, quis pretium dui. Donec lacinia, est auctor blandit mattis, libero ante semper arcu, ac mollis mi magna euismod nisi. Praesent in est orci. Sed ac quam mauris, vitae dignissim nunc. Morbi a purus ac nulla cursus varius. Phasellus sed tellus orci. Quisque venenatis libero nec neque suscipit at tincidunt magna cursus. Proin nulla risus, rutrum ac varius et, tempus vitae est.</p>
<p>Nam auctor arcu sed enim faucibus porta. Curabitur vel sem eros, fermentum convallis tortor. Curabitur eros risus, mattis id viverra aliquam, pretium eu libero. Donec placerat cursus tortor. Etiam eget diam sed sem porta congue. Praesent mattis magna vel massa dapibus a auctor ante dapibus. Nullam egestas, nunc sed tristique gravida, massa ante bibendum ipsum, sed ullamcorper velit leo a dolor. Mauris at lacinia turpis. Nullam dignissim faucibus metus id luctus. In non nibh et quam luctus hendrerit eu eu erat.</p>
<p>Aliquam non risus commodo augue viverra faucibus sed sit amet est. Aliquam erat volutpat. Nam neque magna, facilisis non hendrerit nec, ultrices sed ante. Fusce ultricies neque eu augue ullamcorper venenatis. Quisque et massa id nibh rhoncus condimentum. Proin vel urna vitae purus faucibus dignissim accumsan id massa. Fusce dignissim tortor eu mi porttitor viverra. Suspendisse dignissim urna id urna porttitor tincidunt. Sed purus ligula, condimentum id aliquam at, vehicula quis lectus. Nunc et pellentesque elit. Morbi posuere ullamcorper orci at scelerisque. Mauris condimentum quam at sapien molestie luctus. Sed ullamcorper mi odio, eget lobortis tortor. Suspendisse consequat elit sed risus pulvinar scelerisque. Duis imperdiet urna vitae magna venenatis rutrum. Proin vehicula malesuada risus, eu tempor orci faucibus quis.</p>
<p>Nullam at orci nulla. Etiam vel sem in nibh porttitor venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla luctus sapien quis neque mattis eget lacinia mauris ullamcorper. Aenean dictum pellentesque eros. Nulla facilisi. Curabitur ut sem sit amet mi iaculis luctus ac ac magna. Sed libero mi, suscipit vitae tempus eu, mattis vel sem. Suspendisse at felis arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ullamcorper rhoncus mi sit amet venenatis. Curabitur id orci id leo placerat ultricies vitae et felis.</p>
<p>Ut molestie hendrerit massa, eu facilisis elit pharetra et. Aenean aliquet ornare arcu, vitae porta odio vulputate sed. Fusce at porta eros. Pellentesque posuere sapien suscipit nisi adipiscing viverra vitae ac magna. In suscipit sodales ante in dignissim. Curabitur porta nunc eu dui malesuada congue. Pellentesque lorem justo, placerat id aliquet at, ultrices ut dui. In pharetra sapien nec magna lobortis varius volutpat ante commodo. Phasellus congue feugiat massa, eget varius massa placerat vel. Aliquam erat volutpat. Phasellus at felis mauris. Vivamus non nibh sem. In quis turpis eget nunc imperdiet sollicitudin. Mauris bibendum libero id sapien vehicula auctor. Aenean posuere eleifend elit, at aliquam ipsum dignissim quis. Aenean ultricies porttitor urna, a vulputate ante auctor quis.</p>
</div>
<a href="http://jsfiddle.net/jstoudt/hY64r/embedded/html,css,js,result" class="view-code" rel="#demo-source4">View Code for this Demo <i></i></a>
</figure>
</section>
<section id="try-it-now-section">
<h2>Try enscroll Right Here, Right Now!</h2>
<p>You can also open this fiddle directly: <a href="http://jsfiddle.net/jstoudt/PGuB5">http://jsfiddle.net/jstoudt/PGuB5/</a></p>
<iframe width="925" height="675" frameborder="0" scrolling="no"></iframe>
</section>
</div>
</div>
</div>
<footer role="contentinfo">
<nav>
<a href="/">enscroll home</a>
|
<a href="http://github.com/jstoudt/enscroll" rel="nofollow">github repository</a>
|
<a href="/license.html">license</a>
|
<a href="http://github.com/jstoudt/enscroll/issues" rel="nofollow">report an issue</a>
|
<a href="http://jsfiddle.net/jstoudt/PGuB5" rel="nofollow">jsFiddle</a>
|
<a href="http://twitter.com/enscroll" rel="nofollow">twitter feed</a>
</nav>
<a href="#top" id="scroll-to-top">↑ Back to the top</a>
</footer>
<a class="gh-ribbon" href="https://github.com/jstoudt/enscroll">
<img src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub">
</a>
<div class="overlay" id="demo-source1">
<iframe width="605" height="460" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
</div>
<div class="overlay" id="demo-source2">
<iframe width="605" height="460" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
</div>
<div class="overlay" id="demo-source3">
<iframe width="605" height="460" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
</div>
<div class="overlay" id="demo-source4">
<iframe width="605" height="460" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>window.jQuery||document.write('<script src="js/libs/jquery-1.10.1.min.js">\x3C/script>')</script>
<!-- build:js js/script.min.js -->
<script src="js/libs/jquery-migrate-1.2.1.js"></script>
<script src="js/mylibs/jquery.tools.min.js"></script>
<script src="js/mylibs/handlebars.runtime.js"></script>
<script src="js/documentation.js"></script>
<script src="js/mylibs/enscroll.js"></script>
<script src="js/mylibs/shi_default.min.js"></script>
<script src="js/script.js"></script>
<!-- endbuild -->
<!--[if lt IE 7 ]>
<script src="js/libs/DD_belatedPNG_0.0.8a-min.js"></script>
<script>window.attachEvent('onload',function(){DD_belatedPNG.fix('.png,img')})</script>
<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
<script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
<![endif]-->
<script>
var _gaq=[['_setAccount','UA-29024071-1'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>