Shell File Manager
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Scrollbar | Atlantis Bootstrap Dashboard</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
<link rel="icon" href="../../assets/img/icon.ico" type="image/x-icon"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Fonts and icons -->
<script src="../../assets/js/plugin/webfont/webfont.min.js"></script>
<script>
WebFont.load({
google: {"families":["Lato:300,400,700,900"]},
custom: {"families":["Flaticon", "Font Awesome 5 Solid", "Font Awesome 5 Regular", "Font Awesome 5 Brands", "simple-line-icons"], urls: ['../../assets/css/fonts.min.css']},
active: function() {
sessionStorage.fonts = true;
}
});
</script>
<link rel="stylesheet" href="../../assets/css/bootstrap.min.css">
<link rel="stylesheet" href="../../assets/css/atlantis.min.css">
<link href="../assets/styles.css" rel="stylesheet" />
<link href="../assets/prism.css" rel="stylesheet" />
<style>
.demo-scrollbar {
height: 300px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="main-header">
<div class="logo-header" data-background-color="light-blue2">
<a href="../index.html" class="logo">
<img src="../../assets/img/logo.svg" alt="navbar brand" class="navbar-brand">
</a>
<button class="navbar-toggler sidenav-toggler ml-auto" type="button" data-toggle="collapse" data-target="collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
<i class="icon-menu"></i>
</span>
</button>
<button class="topbar-toggler more"><i class="icon-options-vertical"></i></button>
<div class="nav-toggle">
<button class="btn btn-toggle toggle-sidebar">
<i class="icon-menu"></i>
</button>
</div>
</div>
<nav class="navbar navbar-header navbar-expand-lg" data-background-color="light-blue2">
<div class="container-fluid">
<ul class="navbar-nav topbar-nav ml-md-auto align-items-center">
<li class="nav-item">
<a href="../../examples/demo1" class="nav-link">
Live Preview
</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="sidebar sidebar-style-2">
<div class="sidebar-background"></div>
<div class="sidebar-wrapper scrollbar scrollbar-inner">
<div class="sidebar-content">
<ul class="nav nav-info">
<li class="nav-item">
<a href="../index.html">
<i class="fas fa-home"></i>
<p>Introduction</p>
</a>
</li>
<li class="nav-section">
<span class="sidebar-mini-icon">
<i class="fa fa-ellipsis-h"></i>
</span>
<h4 class="text-section">Components</h4>
</li>
<li class="nav-item">
<a href="../components/alerts.html">
<span class="letter-icon">A</span>
<p>Alerts</p>
</a>
</li>
<li class="nav-item">
<a href="../components/avatars.html">
<span class="letter-icon">Av</span>
<p>Avatars</p>
</a>
</li>
<li class="nav-item">
<a href="../components/badge.html">
<span class="letter-icon">Ba</span>
<p>Badge</p>
</a>
</li>
<li class="nav-item">
<a href="../components/breadcrumb.html">
<span class="letter-icon">Bc</span>
<p>Breadcrumb</p>
</a>
</li>
<li class="nav-item">
<a href="../components/buttons.html">
<span class="letter-icon">Bt</span>
<p>Buttons</p>
</a>
</li>
<li class="nav-item">
<a href="../components/card.html">
<span class="letter-icon">C</span>
<p>Card</p>
</a>
</li>
<li class="nav-item">
<a href="../components/collapse.html">
<span class="letter-icon">Co</span>
<p>Collapse</p>
</a>
</li>
<li class="nav-item">
<a href="../components/colors.html">
<span class="letter-icon">Cl</span>
<p>Colors</p>
</a>
</li>
<li class="nav-item">
<a href="../components/dropdowns.html">
<span class="letter-icon">D</span>
<p>Dropdowns</p>
</a>
</li>
<li class="nav-item">
<a href="../components/forms.html">
<span class="letter-icon">F</span>
<p>Forms</p>
</a>
</li>
<li class="nav-item">
<a href="../components/layoutsbackground.html">
<span class="letter-icon">L</span>
<p>Layouts Background</p>
</a>
</li>
<li class="nav-item">
<a href="../components/loaders.html">
<span class="letter-icon">Lo</span>
<p>Loaders</p>
</a>
</li>
<li class="nav-item">
<a href="../components/modal.html">
<span class="letter-icon">M</span>
<p>Modal</p>
</a>
</li>
<li class="nav-item">
<a href="../components/navs.html">
<span class="letter-icon">N</span>
<p>Navs</p>
</a>
</li>
<li class="nav-item">
<a href="../components/navbar.html">
<span class="letter-icon">Nb</span>
<p>Navbar</p>
</a>
</li>
<li class="nav-item">
<a href="../components/pagination.html">
<span class="letter-icon">Pa</span>
<p>Pagination</p>
</a>
</li>
<li class="nav-item">
<a href="../components/popovers.html">
<span class="letter-icon">Po</span>
<p>Popovers</p>
</a>
</li>
<li class="nav-item">
<a href="../components/progress.html">
<span class="letter-icon">Pr</span>
<p>Progress</p>
</a>
</li>
<li class="nav-item">
<a href="../components/tables.html">
<span class="letter-icon">T</span>
<p>Tables</p>
</a>
</li>
<li class="nav-item">
<a href="../components/tooltips.html">
<span class="letter-icon">To</span>
<p>Tooltips</p>
</a>
</li>
<li class="nav-item">
<a href="../components/typography.html">
<span class="letter-icon">Ty</span>
<p>Typography</p>
</a>
</li>
<li class="nav-section">
<span class="sidebar-mini-icon">
<i class="fa fa-ellipsis-h"></i>
</span>
<h4 class="text-section">Plugins</h4>
</li>
<li class="nav-item">
<a href="../plugins/chart.html">
<span class="letter-icon">C</span>
<p>Chart.js</p>
</a>
</li>
<li class="nav-item">
<a href="../plugins/chartcircle.html">
<span class="letter-icon">Cc</span>
<p>Chart Circle</p>
</a>
</li>
<li class="nav-item">
<a href="../plugins/animate.html">
<span class="letter-icon">Cs</span>
<p>CSS Animate</p>
</a>
</li>
<li class="nav-item">
<a href="../plugins/datatables.html">
<span class="letter-icon">Da</span>
<p>Datatables</p>
</a>
</li>
<li class="nav-item">
<a href="../plugins/jqvmap.html">
<span class="letter-icon">Jm</span>
<p>JQVmap</p>
</a>
</li>
<li class="nav-item active">
<a href="../plugins/scrollbar.html">
<span class="letter-icon">Js</span>
<p>Jquery Scrollbar</p>
</a>
</li>
<li class="nav-item">
<a href="../plugins/notify.html">
<span class="letter-icon">N</span>
<p>Notify</p>
</a>
</li>
<li class="nav-item">
<a href="../plugins/slider.html">
<span class="letter-icon">Sl</span>
<p>Slider</p>
</a>
</li>
<li class="nav-item">
<a href="../plugins/sweetalert.html">
<span class="letter-icon">Sa</span>
<p>Sweet Alert</p>
</a>
</li>
<li class="nav-item">
<a href="../plugins/sparkline.html">
<span class="letter-icon">Sp</span>
<p>Sparkline</p>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="main-panel">
<div class="content content-documentation">
<div class="container-fluid">
<div class="card card-documentation">
<div class="card-header bg-info-gradient text-white bubble-shadow">
<h4>jQuery Scrollbar</h4>
<p class="mb-0 op-8">Cross-browser CSS customizable scrollbar. For more information please check <strong><a href="https://gromo.github.io/jquery.scrollbar/" target="_blank">Full Documentation</a></strong>.</p>
</div>
<div class="card-body">
<h4 class="subcontent-title"><span>Example</span></h4>
<h5>Simple Inner</h5>
<div class="bd-example">
<div class="demo-scrollbar scrollbar-inner">
<p class="permanent">
Simple inner scrollbar over content
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
viverra nisi, in interdum massa nibh nec erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
viverra nisi, in interdum massa nibh nec erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
viverra nisi, in interdum massa nibh nec erat.
</p>
</div>
</div>
<pre class="language-markup">
<code class="language-markup">
<div class="demo-scrollbar scrollbar-inner" style="max-height: 300px">
<p class="permanent">
Simple inner scrollbar over content
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat. </p>
</div>
</code>
</pre>
<pre class="language-markup">
<code class="language-css">
.demo-scrollbar {
height: 300px;
}
</code>
</pre>
<pre class="language-markup">
<code class="language-javascript">
$(document).ready(function(){
$('.scrollbar-inner').scrollbar();
});
</code>
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="../../assets/js/core/jquery.3.2.1.min.js"></script>
<script src="../../assets/js/plugin/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script src="../../assets/js/plugin/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js"></script>
<script src="../../assets/js/core/popper.min.js"></script>
<script src="../../assets/js/core/bootstrap.min.js"></script>
<script src="../../assets/js/plugin/chart.js/chart.min.js"></script>
<script src="../../assets/js/plugin/bootstrap-notify/bootstrap-notify.min.js"></script>
<script src="../../assets/js/plugin/bootstrap-toggle/bootstrap-toggle.min.js"></script>
<script type="text/javascript" src="../../assets/js/plugin/jqvmap/jquery.vmap.min.js"></script>
<script type="text/javascript" src="../../assets/js/plugin/jqvmap/maps/jquery.vmap.world.js" charset="utf-8"></script>
<script src="../../assets/js/plugin/chart-circle/circles.min.js"></script>
<script src="../../assets/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js"></script>
<script src="../../assets/js/atlantis.min.js"></script>
<script src="../assets/prism.js"></script>
<script src="../assets/prism-normalize-whitespace.min.js"></script>
<script type="text/javascript">
// Optional
Prism.plugins.NormalizeWhitespace.setDefaults({
'remove-trailing': true,
'remove-indent': true,
'left-trim': true,
'right-trim': true,
});
// handle links with @href started with '#' only
$(document).on('click', 'a[href^="#"]', function(e) {
// target element id
var id = $(this).attr('href');
// target element
var $id = $(id);
if ($id.length === 0) {
return;
}
// prevent standard hash navigation (avoid blinking in IE)
e.preventDefault();
// top position relative to the document
var pos = $id.offset().top - 80;
// animated top scrolling
$('body, html').animate({scrollTop: pos});
});
</script>
<script>
$(document).ready(function(){
$('.scrollbar-inner').scrollbar();
});
</script>
</html>
Shell File Manager Version 1.1, Coded By Shell
Email: [email protected]