scrollbars.html

---
title: Scrollbars
slug: scrollbars
---
{% extends "layouts/default.html" %}
	
{% block page %}
{% markdown %}
# Scrollbars
Bootstrap Layout integrates out of the box with [Simplebar.js](https://github.com/Grsmto/simplebar). This plugin emulates the OS X UI pattern by replacing the browser's default scrollbars with a floating, custom CSS-styled scrollbar that is only revealed when the user hovers over a scrollable element. Note that Simplebar.js is disabled for browsers which are already using native floating scrollbars (most browsers on mobile devices and OS X).  
{% endmarkdown %}

<div class="card card-block">
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a href="#install" data-toggle="pill" class="nav-link active">Installation</a>
    </li>
    <li class="nav-item">
      <a href="#usage" data-toggle="pill" class="nav-link">Usage</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="install">
      <blockquote>
        Simple install via npm:
      </blockquote>
      {% include 'code/scrollable/install.html' %}

      <blockquote>
        To enable the Simplebar.js integration, load the libraries into your HTML pages.
      </blockquote>
      <h4>CSS assets</h4>
      {% include 'code/scrollable/css.html' %}

      <h4>JavaScript assets</h4>
      {% include 'code/scrollable/js.html' %}
    </div>
    <div class="tab-pane" id="usage">
      <blockquote>
        Add the <code>data-scrollable</code> attribute to any element. Also, see the usage for <a href="layout/index.html">Layout</a> and <a href="sidebar/index.html">Sidebar</a>.
      </blockquote>
      {% include 'code/scrollable/usage.html' %}
    </div>
  </div>
</div>

<h2>JavaScript</h2>
<div class="card card-block">
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a href="#js-methods" data-toggle="pill" class="nav-link active">Methods</a>
    </li>
    <li class="nav-item">
      <a href="#js-events" data-toggle="pill" class="nav-link">Events</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="js-methods">
      {% include 'reference/js/methods/scrollable.init.html' %}
    </div>
    <div class="tab-pane" id="js-events">
      {% include 'reference/js/events/scrollable.html' %}
    </div>
  </div>
</div>

{% endblock %}