Untitled

<!DOCTYPE html>
<html>
   <head>
      <style>
         html,body{
         margin:0;
         padding:0;
         width:100%;
         height:100%
         }
         #HScroll{
         width:100%;
         height:100%;
         overflow-y : hidden;
         overflow-x : scroll;
         }
         #HScrollContent{
         display:block;
         width:200%;
         height:100%;
         overflow-y : hidden;
         }
         #one{width:50%;background:blue; height:100%;display: inline-block;}
         #two{width:50%; background:red; height:100%;display: inline-block;}
      </style>
   </head>
   <body>
      <div id="HScroll">
         <div id="HScrollContent">
            <div id="one"></div>
            <div id="two"></div>
         </div>
      </div>
      <script>
         (function() {
             var myHDiv = document.getElementById('HScroll');

            myHDiv.onmousewheel = function(e,delta){
               // console.log(e);
                myHDiv.scrollLeft += (e.deltaY);
                e.preventDefault();
            }
         })()
      </script>
   </body>
</html>