an element Smooth Horizontal scrolling by jquery

an element Smooth Horizontal scrolling by jquery

hi everybody
i have elements like this
  1. <div class="main">
  2.       <div class="columns">
  3.             <div class="column" ></div>
  4.             <div class="column" ></div>
  5.             <div class="column" ></div>
  6.             <div class="column" ></div>
  7.             <div class="column" ></div>
  8.       </div>
  9. </div>
main div have width property lower than screen weight , and overflow:hidden columns div have big width base on divs in it column are sections i want sections be in screen horizontal and scroll no problem with css and html codes and i design it well just scrolling under code do that

  1. $('.main').bind("mousewheel DOMMouseScroll", function(event) { //event.preventDefault(); if (event.originalEvent.detail > 0 || event.originalEvent.wheelDelta < 0) { x += 30 ; $('.divs').css('marginLeft',x); }else { x -= 30 ; $('.divs').css('marginLeft',x); } };

x is columns width it is work but it is simple

i want writhe smooth scrolling and set scrollbar for it but i have no idea to do that please guide me for smooth scrolling with scrolling(mousewheel , by scrollbar , by mouse drag and move) and set scrollbar for it tnx