formstone
Version:
Library of modular front end components.
178 lines (162 loc) • 13.3 kB
HTML
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<!-- Page Attributes -->
<title>Scrollbar · Formstone</title>
<!-- Modernizer -->
<script src="../js/modernizr.js?v=1.4.7"></script>
<!-- Compiled CSS -->
<link rel="stylesheet" href="../css/site.css?v=1.4.7">
<!-- Compiled JS -->
<script src="../js/site.js?v=1.4.7"></script>
<!-- <script src="https://code.jquery.com/jquery-migrate-3.0.0.js"></script> -->
</head>
<body class="fs-grid demo_page">
<!-- JSHEADER -->
<div class="demo_content">
<header class="header">
<div class="fs-row">
<div class="fs-cell"> <a href="https://formstone.it/" class="header_logo icon-logo">Formstone</a> </div>
</div>
</header>
<div class="fs-row">
<div class="fs-cell">
<h1 id="scrollbar-demo">Scrollbar Demo</h1>
<p class="back_link"><a href="https://formstone.it/components/scrollbar">View Documentation</a></p>
<!-- START: DEMO -->
<h4>Basic</h4>
<!-- START: FIRSTDEMO -->
<style>
.scrollbar {
height: 200px;
overflow: auto;
margin: 20px 0 0;
}
</style>
<div class="demo_container">
<div class="demo_example">
<div class="scrollbar scrollbar_theme js-scrollbar" data-scrollbar-options='{"trackMargin":5}'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla porta aliquet gravida. Aenean pulvinar blandit orci vel fermentum. Phasellus viverra pulvinar viverra. Quisque et sagittis ante. Nulla sem neque, fermentum at laoreet
vel, rhoncus sit amet nisl. Donec consectetur urna ac massa placerat ac pharetra sem mollis. Integer nibh urna, placerat vel placerat in, tempor at nisi. Aenean rutrum, enim sit amet rutrum fermentum, magna justo volutpat
massa, lacinia adipiscing nisl magna eget nibh. In auctor, nibh eget faucibus tristique, arcu turpis molestie orci, placerat suscipit diam nibh et erat. Curabitur tempus lectus quis odio ornare porta.</p>
<p>Aenean odio libero, eleifend eu luctus quis, accumsan ac risus. Mauris egestas bibendum tortor vel semper. Ut egestas, erat ut rutrum tempus, massa erat commodo arcu, id congue justo odio ac erat. Quisque non purus et nunc
consequat scelerisque. Vestibulum vitae tristique dolor. Suspendisse ac quam interdum libero euismod tempus. Sed a ante justo, varius commodo urna.</p>
<p>Ut ante felis, malesuada eu eleifend convallis, tempor eget tellus. Vestibulum rhoncus elementum dui a sagittis. Praesent eu nunc vitae massa cursus luctus ac eget massa. Etiam sagittis nibh nisi, vel sagittis felis. Aliquam
vulputate mauris id nunc pellentesque at fermentum lacus dapibus. Donec pretium consectetur magna sit amet egestas. Ut dignissim adipiscing purus sit amet lobortis.</p>
<p>Curabitur ullamcorper, nisi quis convallis luctus, nunc nisi mollis felis, eu mattis nunc sapien sed sapien. Vestibulum in nisi mauris, mattis sagittis lacus. Pellentesque in sem augue, a blandit augue. Aliquam bibendum diam
ac erat imperdiet vestibulum. Vivamus dignissim, quam in feugiat scelerisque, enim risus interdum turpis, in vehicula ante lorem eu erat. Mauris ac turpis luctus libero pulvinar ultricies. Praesent porttitor nulla non risus
porta consequat. Nunc vulputate porta nulla non ultrices. Donec et magna eu nisl elementum scelerisque. Curabitur in vehicula dui.</p>
<p>Suspendisse eu nibh in libero euismod condimentum eget nec enim. Suspendisse nec ligula nec augue tristique semper sed suscipit erat. Integer et nunc a augue pellentesque fringilla. Nullam leo ligula, mattis id pretium ac,
suscipit sed nunc. Duis ac lorem nec velit malesuada tempus hendrerit ut metus. Quisque a lacus vel lectus rhoncus luctus. Aliquam ornare, nunc sit amet porttitor ornare, libero lectus congue enim, vitae tincidunt sapien
justo et ligula. Proin vestibulum blandit fringilla. </p>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><div class="scrollbar">
	...
</div></code></pre>
<pre><code class="language-javascript">$(".scrollbar").scrollbar();</code></pre>
</div>
</div>
<!-- END: FIRSTDEMO -->
<style>
.scrollbar_theme {
padding: 10px 20px 10px 20px;
}
.scrollbar_theme.fs-scrollbar {
padding: 0;
}
.scrollbar_theme.fs-scrollbar .fs-scrollbar-content,
.scrollbar_theme.fs-scrollbar-active .fs-scrollbar-content {
padding: 20px 40px 20px 20px;
}
.scrollbar p {
margin: 0 0 20px;
}
.scrollbar.horizontal {
height: 225px;
padding: 0;
}
.wide_load {
width: 2400px;
overflow: hidden;
}
.wide_load p {
float: left;
margin: 0 25px 0 0;
width: 450px;
}
</style>
<h4>Horizontal</h4>
<div class="demo_container">
<div class="demo_example">
<div class="scrollbar scrollbar_theme horizontal js-scrollbar" data-scrollbar-options='{"horizontal":true,"trackMargin":5}'>
<div class="wide_load">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla porta aliquet gravida. Aenean pulvinar blandit orci vel fermentum. Phasellus viverra pulvinar viverra. Quisque et sagittis ante. Nulla sem neque, fermentum
at laoreet vel, rhoncus sit amet nisl. Donec consectetur urna ac massa placerat ac pharetra sem mollis. Integer nibh urna, placerat vel placerat in, tempor at nisi.</p>
<p>Aenean odio libero, eleifend eu luctus quis, accumsan ac risus. Mauris egestas bibendum tortor vel semper. Ut egestas, erat ut rutrum tempus, massa erat commodo arcu, id congue justo odio ac erat. Quisque non purus et nunc
consequat scelerisque. Vestibulum vitae tristique dolor. Suspendisse ac quam interdum libero euismod tempus. Sed a ante justo, varius commodo urna.</p>
<p>Ut ante felis, malesuada eu eleifend convallis, tempor eget tellus. Vestibulum rhoncus elementum dui a sagittis. Praesent eu nunc vitae massa cursus luctus ac eget massa. Etiam sagittis nibh nisi, vel sagittis felis. Aliquam
vulputate mauris id nunc pellentesque at fermentum lacus dapibus. Donec pretium consectetur magna sit amet egestas. Ut dignissim adipiscing purus sit amet lobortis.</p>
<p>Curabitur ullamcorper, nisi quis convallis luctus, nunc nisi mollis felis, eu mattis nunc sapien sed sapien. Vestibulum in nisi mauris, mattis sagittis lacus. Pellentesque in sem augue, a blandit augue. Aliquam bibendum
diam ac erat imperdiet vestibulum. Vivamus dignissim, quam in feugiat scelerisque, enim risus interdum turpis, in vehicula ante lorem eu erat. Mauris ac turpis luctus libero pulvinar ultricies.</p>
<p>Suspendisse eu nibh in libero euismod condimentum eget nec enim. Suspendisse nec ligula nec augue tristique semper sed suscipit erat. Integer et nunc a augue pellentesque fringilla. Nullam leo ligula, mattis id pretium
ac, suscipit sed nunc. Duis ac lorem nec velit malesuada tempus hendrerit ut metus. Quisque a lacus vel lectus rhoncus luctus. </p>
</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><div class="scrollbar">
	...
</div></code></pre>
<pre><code class="language-javascript">$(".scrollbar").scrollbar({
horizontal: true
});</code></pre>
</div>
</div>
<h4>No Theme</h4>
<div class="demo_container">
<div class="demo_example">
<div class="scrollbar js-scrollbar" data-scrollbar-options='{"theme":"","trackMargin":5}'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla porta aliquet gravida. Aenean pulvinar blandit orci vel fermentum. Phasellus viverra pulvinar viverra. Quisque et sagittis ante. Nulla sem neque, fermentum at laoreet
vel, rhoncus sit amet nisl. Donec consectetur urna ac massa placerat ac pharetra sem mollis. Integer nibh urna, placerat vel placerat in, tempor at nisi. Aenean rutrum, enim sit amet rutrum fermentum, magna justo volutpat
massa, lacinia adipiscing nisl magna eget nibh. In auctor, nibh eget faucibus tristique, arcu turpis molestie orci, placerat suscipit diam nibh et erat. Curabitur tempus lectus quis odio ornare porta.</p>
<p>Aenean odio libero, eleifend eu luctus quis, accumsan ac risus. Mauris egestas bibendum tortor vel semper. Ut egestas, erat ut rutrum tempus, massa erat commodo arcu, id congue justo odio ac erat. Quisque non purus et nunc
consequat scelerisque. Vestibulum vitae tristique dolor. Suspendisse ac quam interdum libero euismod tempus. Sed a ante justo, varius commodo urna.</p>
<p>Ut ante felis, malesuada eu eleifend convallis, tempor eget tellus. Vestibulum rhoncus elementum dui a sagittis. Praesent eu nunc vitae massa cursus luctus ac eget massa. Etiam sagittis nibh nisi, vel sagittis felis. Aliquam
vulputate mauris id nunc pellentesque at fermentum lacus dapibus. Donec pretium consectetur magna sit amet egestas. Ut dignissim adipiscing purus sit amet lobortis.</p>
<p>Curabitur ullamcorper, nisi quis convallis luctus, nunc nisi mollis felis, eu mattis nunc sapien sed sapien. Vestibulum in nisi mauris, mattis sagittis lacus. Pellentesque in sem augue, a blandit augue. Aliquam bibendum diam
ac erat imperdiet vestibulum. Vivamus dignissim, quam in feugiat scelerisque, enim risus interdum turpis, in vehicula ante lorem eu erat. Mauris ac turpis luctus libero pulvinar ultricies. Praesent porttitor nulla non risus
porta consequat. Nunc vulputate porta nulla non ultrices. Donec et magna eu nisl elementum scelerisque. Curabitur in vehicula dui.</p>
<p>Suspendisse eu nibh in libero euismod condimentum eget nec enim. Suspendisse nec ligula nec augue tristique semper sed suscipit erat. Integer et nunc a augue pellentesque fringilla. Nullam leo ligula, mattis id pretium ac,
suscipit sed nunc. Duis ac lorem nec velit malesuada tempus hendrerit ut metus. Quisque a lacus vel lectus rhoncus luctus. Aliquam ornare, nunc sit amet porttitor ornare, libero lectus congue enim, vitae tincidunt sapien
justo et ligula. Proin vestibulum blandit fringilla. </p>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><div class="scrollbar">
	...
</div></code></pre>
<pre><code class="language-javascript">$(".scrollbar").scrollbar({
theme: ""
});</code></pre>
</div>
</div>
<!-- END: DEMO -->
<div class="footer">
<div class="copyright">
<div>© 2018 <a href="https://formstone.it/">Formstone</a></div>
</div>
<div class="footer_links">
<!-- JSFOOTER -->
</div>
</div>
</div>
</div>
</div>
</body>
</html>