JSFiddle - React, Tailwind, and code Playground

by satantx

HTML

<script src="http://test.chastnik.ru/bitrix/templates/chastnik/js/jquery.mousewheel.min.js"></script>
<div class="content">
    
</div>

<div class="text">0</div>

CSS

html, body {
    height: 100%;
}

.content {
    width: 4000px;
    min-height: 100%;
	height: auto !important;
	height: 100%;
    background: #ff0;
}


.text {
     width: 837px;
    background: #ccc;
    margin-top: -20px;
}

JavaScript

var window_width = document.body.clientWidth;

$('.content').mousewheel(function(event, delta) { 
      if (delta < 0) { 
          $('.text').html('1');
          
          var value = window_width;
          $('body, html').stop().animate({
             scrollLeft: value
          }, 500);
      } 
      else { 
          $('.text').html('2');
          $('body, html').stop().animate({
             scrollLeft: -window_width
          }, 500);
      } 
      return false; 
});