Scroll Box

by Charles Butler

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.3/jquery.mCustomScrollbar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.3/jquery.mCustomScrollbar.concat.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.3/jquery.mCustomScrollbar.css">
<script src="http://manos.malihu.gr/tuts/custom-scrollbar-plugin/jquery.mousewheel.min.js">

</script>





<div class="wrapper">
  <h1>Fluid width &amp; height scrollbar with scroll buttons</h1>
  <p>Resize browser to test</p>
  <!-- content block -->
  <div id="content_1" class="content">
    <p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
    <p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
    <p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc
      placerat consequat.</p>
    <p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit
      erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
    <p>Etiam sed massa felis, aliquam pellentesque est.</p>
    <p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non
      eros. Praesent ipsum...

CSS

html,
        body {
          height: 100%;
        }
        
        body {
          margin: 0;
          padding: 0;
          color: #eee;
          background: #222;
          font-family: Verdana, Geneva, sans-serif;
          font-size: 13px;
          line-height: 20px;
        }
        
        a:link,
        a:visited,
        a:hover {
          color: #fff;
        }
        
        h1 {
          font-family: Georgia, serif;
          font-size: 19px;
          font-style: italic;
          margin: 20px 40px 0 40px;
          color: #09C;
        }
        
        h1+p {
          margin: 10px 40px 0 40px;
          color: #ccc;
          font-style: italic;
        }
        
        p {
          margin: 0 0 20px 0;
        }
        
        hr {
          height: 0;
          border: none;
          border-bottom: 1px solid rgba(255, 255, 255, 0.2);
          border-top: 1px solid rgba(0, 0, 0, 0.9);
          margin: 20px 10px;
          clear: both;
        }
        
        .links {
          margin: 10px 0 0 10px;
        }
        
        .links a {
          display: inline-block;
          padding: 2px 10px;
          margin: 10px;
          background: #C30;
          text-decoration: none;
          -webkit-border-radius: 15px;
          -moz-border-radius: 15px;
          border-radius: 15px;
        }
        
        .links a:hover {
          background: #de4816;
        }
        
        .wrapper {
          height: 80%;
        }
        
        .content {
          position: relative;
          margin: 40px auto;
          width: 100%;
          max-width: 300px;
          height: 85%;
          padding: 20px 40px;
          overflow: auto;
          background: #274147;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
        }
        
        .content p:nth-child(even) {
          color: #9dbfc6;
          font-family: Georgia, serif;
         ...

JavaScript

$("#content_1").mCustomScrollbar({
  scrollButtons: {
    enable: true,
    					axis:"x",
					advanced:{autoExpandHorizontalScroll:true}
  }
});