页面中间的水平滚动

Question

我想更改页面中间的滚动方向。

我尝试使用＆＃34; jInvertScroll＆＃34;，但此插件在css中增加left，如下所示：left: /* increase on scroll */ px ;

因此，如果我想将滚动方向更改为页面中间，left将具有如下值：left: -1500px;

那是我的问题。 还有其他办法吗？

HTML：

<div class="vertical"></div>
<div class="menu-change"></div>
<div class="horizontal"> 
  <p>scroll</p>
</div>

CSS：

body {
  overflow-x: hidden;
  padding: 0;
  margin: 0;
}

.scroll {
  position: fixed;
  bottom: 0;
  left: 0;
}

.vertical {
  width: 100vw;
  height: 2500px;
  background-image: url(https://source.unsplash.com/random);
} 

.horizontal {
  width: 8500px;
  height: 100vh;
  background-image: url(https://source.unsplash.com/random);
}

JS：

$(document).ready(function(){       
   var scroll_start = 0;
   var startchange = $('.menu-change');
   var offset = startchange.offset();
   $(document).scroll(function() { 
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
          $('.horizontal').addClass('scroll');
          var elem = $.jInvertScroll(['.scroll'],
              {
              onScroll: function(percent) {
                  console.log(percent);
              }
          });
          $(window).resize(function() {
            if ($(window).width() <= 0) {
              elem.destroy();
            }
            else {
              elem.reinitialize(); 
            }
          });
       } else {
            $('.horizontal').removeClass('scroll');
      }
   });
});