Tiny Scroll bar : Scroll bar is not appearing

Question

I am using Tiny Scrollbar.

Want to achieve horizontal scrolling. Look example of #scrollbar2

Code of that is here.

Markup code is at below.

<div class="wrapper wrapper-head" id="wrapper-head1" style="overflow-x: visible;">
   <div class="scrollbar disable" style="width: 1548px;">
      <div class="track" style="width: 1548px;">
         <div class="thumb" style="width: 1548px;">
              <div class="end">
              </div>
         </div>
      </div>
   </div>

   <div class="div-table table-header viewport" style="overflow-x: hidden;">
    <div class="div-table-row overview" style="overflow-x: visible; left:   0px;">
    <<<<<< Content >>>>>>>
    </div>
  </div>

JS code is as below

$(document).ready(function(){
        $("div.wrapper-head div.table-header").addClass("viewport").css('overflow-x','hidden');
        $("div.wrapper-head  div.div-table-row").addClass('overview').css('overflow-x','visible');
        $("div.wrapper-head").css('overflow-x','visible'); 

        scrollHtml = '<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>';

        $("div.wrapper-head").prepend(scrollHtml);
        $("div.wrapper-head").tinyscrollbar({ axis: 'x' });
   });

I am not getting any error in browser console, but I am not getting tiny scrollbar as well.

What I want to achieve this

thanks in advance.