jQuery Nicescroll Boostrap Test

by firegroove

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.0/jquery.nicescroll.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">jQuery Nicescroll Test</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <form class="navbar-form navbar-right" onsubmit="return false;">
        <div class="form-group">
          <input id="scroll-info-value" type="text" placeholder="scroll" class="form-control">
        </div>
        <button type="submit" class="btn btn-success">It works!</button>
      </form>
    </div>
    <!--/.navbar-collapse -->
  </div>
</nav>

<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">

  <div class="container get-nicer">

    <div class="nice-wrapper">

      <h1>Hello, world!</h1>
      <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
      <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>

      <hr>

      <h1>Hello, world!</h1>
      <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point...

CSS

.get-nicer {
       overflow: auto;
       height: 280px;
     }

     .nice-wrapper {}

     .nicescroll-rails {
       background-color: rgb(51, 122, 183);
     }

     .nicescroll-cursors {
       border: none !important;
       background-color: #000 !important;
       border-radius: 0 !important;
     }

     .jumbotron {
       padding-top: 80px;
     }

JavaScript

$(function() {

      $(".get-nicer").niceScroll("div.nice-wrapper", {
        cursorwidth: "12px"
      });

      $(".get-nicer").scroll(function() {
        $("#scroll-info-value").val($(".get-nicer").scrollTop());
      });

      $("a.btn").click(function(e) {
        e.preventDefault();

        console.log('click', e.target);

        $('#nice-modal1').modal();
      });

    });