Nation Library - Vertical scrollbar example

Shows how to create a vertical scrollbar with the Nation library

by NationStudio

HTML

<script src="https://techdocs.wearenation.co.uk/nation/Utils.js"></script>
<script src="https://techdocs.wearenation.co.uk/nation/EventDispatcher.js"></script>
<script src="https://techdocs.wearenation.co.uk/nation/VerticalScrollbar.js"></script>
<div class="article">
  <!-- Content that will be scrolled via scrollTop -->
  <div class="js-scrollable-content">
    <div class="content">
      <p>Mauris in dolor velit. Aliquam euismod leo justo, ut fermentum neque rutrum nec. Suspendisse mi leo, facilisis non iaculis vitae, vehicula laoreet mauris. Nulla facilisi. Mauris nec erat et risus auctor feugiat in vitae velit. In ac aliquam enim. Sed vestibulum dolor a lorem interdum blandit. Morbi dignissim porttitor congue. Phasellus maximus massa sit amet vehicula vehicula.</p>
      <p>Mauris in dolor velit. Aliquam euismod leo justo, ut fermentum neque rutrum nec. Suspendisse mi leo, facilisis non iaculis vitae, vehicula laoreet mauris. Nulla facilisi. Mauris nec erat et risus auctor feugiat in vitae velit. In ac aliquam enim. Sed vestibulum dolor a lorem interdum blandit. Morbi dignissim porttitor congue. Phasellus maximus massa sit amet vehicula vehicula.</p>
    </div>
  </div>
  <!-- Scrollbar HTML, which should contain js-handle and js-track -->
  <div class="js-scrollbar">
    <div class="js-track"></div>
    <div class="js-handle"></div>
  </div>
</div>

CSS

/* Element containing both content and scrollbar*/
.article {
  position: relative;
  width: 100%;
  max-width: 400px;
}

/* Content to be scrolled needs a max-height and overflow: hidden */
.js-scrollable-content {
  width: 100%;
  max-height: 150px;
  overflow: hidden;
}

/* Scrollbar here is positioned to the right of the content, but it can be positioned in any way */
.js-scrollbar {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 20px;
  border-left: 1px solid #eee;
  background: #ddd;
}

/* Handle should be absolutely positioned */
.js-handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: #fff;
}

/* Include js-track if you want the user to be able to click on the scrollbar to jump around */
.js-track {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

/* Hide the scrollbar if not in use */
.js-scrollbar.disabled {
  visibility: hidden;
}

JavaScript

// Element that contains a single child
var contentSelector = document.documentElement.querySelector(".js-scrollable-content");
// Element containing js-track and js-handle
var scrollbarSelector = document.documentElement.querySelector(".js-scrollbar");
// Settings for this scrollbar
var options = {
  enableMouseLock: true
}
// Create the scrollbar functionality
var scrollbar = new NATION.VerticalScrollbar(contentSelector, scrollbarSelector, options);