overflow-x 된 DOM에서 마우스 휠로 좌우스크롤 움직이기

먼저 html

 <div class="content">
          <div class="overflow-x" id="overflow-x">
          국가원로자문회의의 의장은 직전대통령이 된다. 다만, 직전대통령이 없을 때에는 대통령이 지명한다. 모든 국민은 법률이 정하는 바에 의하여 납세의 의무를 진다.

탄핵소추의 의결을 받은 자는 탄핵심판이 있을 때까지 그 권한행사가 정지된다. 모든 국민은 헌법과 법률이 정한 법관에 의하여 법률에 의한 재판을 받을 권리를 가진다.국가원로자문회의의 의장은 직전대통령이 된다. 다만, 직전대통령이 없을 때에는 대통령이 지명한다. 모든 국민은 법률이 정하는 바에 의하여 납세의 의무를 진다.

탄핵소추의 의결을 받은 자는 탄핵심판이 있을 때까지 그 권한행사가 정지된다. 모든 국민은 헌법과 법률이 정한 법관에 의하여 법률에 의한 재판을 받을 권리를 가진다.국가원로자문회의의 의장은 직전대통령이 된다. 다만, 직전대통령이 없을 때에는 대통령이 지명한다. 모든 국민은 법률이 정하는 바에 의하여 납세의 의무를 진다.

탄핵소추의 의결을 받은 자는 탄핵심판이 있을 때까지 그 권한행사가 정지된다. 모든 국민은 헌법과 법률이 정한 법관에 의하여 법률에 의한 재판을 받을 권리를 가진다.국가원로자문회의의 의장은 직전대통령이 된다. 다만, 직전대통령이 없을 때에는 대통령이 지명한다. 모든 국민은 법률이 정하는 바에 의하여 납세의 의무를 진다.

탄핵소추의 의결을 받은 자는 탄핵심판이 있을 때까지 그 권한행사가 정지된다. 모든 국민은 헌법과 법률이 정한 법관에 의하여 법률에 의한 재판을 받을 권리를 가진다.국가원로자문회의의 의장은 직전대통령이 된다. 다만, 직전대통령이 없을 때에는 대통령이 지명한다. 모든 국민은 법률이 정하는 바에 의하여 납세의 의무를 진다.

탄핵소추의 의결을 받은 자는 탄핵심판이 있을 때까지 그 권한행사가 정지된다. 모든 국민은 헌법과 법률이 정한 법관에 의하여 법률에 의한 재판을 받을 권리를 가진다.국가원로자문회의의 의장은 직전대통령이 된다. 다만, 직전대통령이 없을 때에는 대통령이 지명한다. 모든 국민은 법률이 정하는 바에 의하여 납세의 의무를 진다.

탄핵소추의 의결을 받은 자는 탄핵심판이 있을 때까지 그 권한행사가 정지된다. 모든 국민은 헌법과 법률이 정한 법관에 의하여 법률에 의한 재판을 받을 권리를 가진다.
         
         </div>
       </div>

css

.content{
   width: 700px;
}

.overflow-x{
   width:420px; 
   height:170px; 
   border:1px solid red; 
   white-space:nowrap; 
   overflow-x:scroll; 
}

js

window.onload = function () {

   $.fn.horizontalmouse = function () {
      var select_dom = document.getElementById(this.selector.replace("#", ""));

      if (select_dom.addEventListener) {
         select_dom.addEventListener("mousewheel", MouseWheelHandler, false);
         select_dom.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
      } else select_dom.attachEvent("onmousewheel", MouseWheelHandler);

      function MouseWheelHandler(e) {

         var e = window.event || e;
         var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail));

         $(this).animate({
            scrollLeft: '-=' + delta * 100
         }, 10);

         return false;
      }
   };

   $(function () {
      $("#overflow-x").horizontalmouse();
   });
};

해당 id만 지정해 주면 마우스로 움직임( 이미지 캐러셀 같은곳에 쓰면 좋을듯..)