<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="scrollbar-external_wrapper"> <div class="scrollbar-external"> <img src="http://gromo.github.io/jquery.scrollbar/includes/tarzan.jpg"> </div> <div class="external-scroll_x"> <div class="scroll-element_outer"> <div class="scroll-element_size"></div> <div class="scroll-element_track"></div> <div class="scroll-bar"></div> </div> </div> <div class="external-scroll_y"> <div class="scroll-element_outer"> <div class="scroll-element_size"></div> <div class="scroll-element_track"></div> <div class="scroll-bar"></div> </div> </div> </div>

/*************** SCROLLBAR BASE CSS ***************/ .scroll-wrapper { overflow: hidden !important; padding: 0 !important; position: relative; } .scroll-wrapper > .scroll-content { border: none !important; box-sizing: content-box !important; height: auto; left: 0; margin: 0; max-height: none; max-width: none !important; overflow: scroll !important; padding: 0; position: relative !important; top: 0; width: auto !important; } .scroll-wrapper > .scroll-content::-webkit-scrollbar { height: 0; width: 0; } .scroll-element { display: none; } .scroll-element, .scroll-element div { box-sizing: content-box; } .scroll-element.scroll-x.scroll-scrollx_visible, .scroll-element.scroll-y.scroll-scrolly_visible { display: block; } .scroll-element .scroll-bar, .scroll-element .scroll-arrow { cursor: default; } .scroll-textarea { border: 1px solid #cccccc; border-top-color: #999999; } .scroll-textarea > .scroll-content { overflow: hidden !important; } .scroll-textarea > .scroll-content > textarea { border: none !important; box-sizing: border-box; height: 100% !important; margin: 0; max-height: none !important; max-width: none !important; overflow: scroll !important; outline: none; padding: 2px; position: relative !important; top: 0; width: 100% !important; } .scroll-textarea > .scroll-content > textarea::-webkit-scrollbar { height: 0; width: 0; } .scrollbar-external_wrapper { height: 450px !important; position: relative; width: auto !important; } .scrollbar-external { height: 400px; overflow: auto; width: 600px; } /******************* EXTERNAL SCROLLBAR *******************/ .external-scroll_x, .external-scroll_y { border: solid 1px #9999fc; cursor: pointer; display: none; position: absolute; } .external-scroll_x.scroll-scrollx_visible { display: block; height: 10px; left: 0; top: 410px; width: 200px; } .external-scroll_y.scroll-scrolly_visible { display: block; height: 200px; left: 610px; top: 0; width: 10px; } .external-scroll_x div, .external-scroll_y div { height: 100%; left: 0; top: 0; position: absolute; width: 100%; } .external-scroll_x .scroll-bar, .external-scroll_y .scroll-bar { background: #9999fc; z-index: 12; } .external-scroll_x .scroll-bar { width: 100px; } .external-scroll_y .scroll-bar { height: 100px; }

jQuery(document).ready(function(){ jQuery('.scrollbar-external').scrollbar({ "autoScrollSize": false, "scrollx": $('.external-scroll_x'), "scrolly": $('.external-scroll_y') }); });