Как настроить плагин jinvertscroll?

Question

Я использую плагин jinvertScroll для создания сайта с горизонтальной прокруткой. Однако, несмотря на то, что мой контейнер прокрутки (.scroll) достаточно длинный, чтобы включать весь мой прокручиваемый контент, он все равно обрезается через случайные интервалы в зависимости от разрешения экрана, а не от явно заданной ширины класса «прокрутка».

Я попытался отрегулировать ширину моего класса .scroll и отредактировать переменные по умолчанию «width» и «height» в начале плагина Jquery. Ни один из этих вариантов не оказал влияния на код.

Может ли кто-нибудь помочь мне изолировать переменную CSS или jquery или код, который необходимо отредактировать для решения этой проблемы ширины?

Я неопытен в jquery, параллаксе и эффектах горизонтальной прокрутки, но они необходимы для проекта, который я сейчас помогаю развивать. Так что помощь, которая является конкретной или включает в себя какие-либо примеры, будет наиболее ценной!

Jsfiddle Demo

Вот копия моего кода:

<div class="wrapper">

<div class="header">
  This is the Header
</div>

<div class="sidebar">
<a href="#">Homepage</a>
<a href="#">Contact</a>
<a href="#">Projects</a>
</div>

<div class="scrollParent">
<div class="scroll">

<div class="page">container 1</div>
<div class="page">container 2</div>
<div class="page">container 3</div>
<div class="page">container 4</div>
<div class="page">container 5</div>


</div>
</div>

<div class="footer">
        This is the Footer
</div>


</div>

<style>
body {
padding:20px;
overflow-x:hidden;
font-size:0;
background:url('https://previews.123rf.com/images/brebca/brebca0709/brebca070900053/1593170-house-plans-background.jpg');
background-repeat: no-repeat;
background-size:cover;
background-attachment:fixed;
}

.wrapper {
position:fixed;
height:700px;
width:1150px;
right:50%;
margin-right:-550px; /** Take half of the width to center it**/
margin-top:2.5%;
}
.header, .footer {
height:100px;
width:1150px;
display:block;
background:lavender;
/*margin:auto;*/
border:1px solid #7575a3;
box-sizing:border-box;
padding:0px 30px;
font:18pt 'montserrat',sans-serif;
font-weight:800;
text-transform:uppercase;
letter-spacing:-2px;
line-height:100px;
color:#7575a3;
}

.footer {
text-align:right;
}

.sidebar {
height:500px;
width:250px;
background:#f8f8f8;
border-left:1px solid #7575a3;
border-right:1px solid #7575a3;
box-sizing:border-box;
padding:20px 30px;
display:inline-block;
}

.sidebar a {
font:10pt 'montserrat',sans-serif;
text-transform:uppercase;
text-decoration:none;
font-weight:800;
display:block;
margin:30px 0px;
color:#7575a3;
}

.scrollParent {
width:900px;
height:500px;
overflow:hidden;
display:inline-block;
background:red;
vertical-align:top;
position:fixed;
}

.scroll {
position: relative;
z-index: 500;
width:4500px;
background:black;
font-size:0;
color:red;
white-space:nowrap;
height:500px;
}


.page {
display:inline-block;
top:0;
background:white;
height:500px;
width:900px;
box-sizing:border-box !important;
padding:20px 30px;
font:8pt 'montserrat',sans-serif;
vertical-align:top;
border-right:1px solid red;
}



</style>


<script>
/**
*   jQuery Plugin for simple vertical scrolling - horizontal movement parallax effect
*   I wrote this plugin for a project we have done.
*
*   License:
*   The MIT License (MIT)
*
*   @version 0.8.3
*
*   Copyright (c) 2013 pixxelfactory
*   
*   Permission is hereby granted, free of charge, to any person obtaining a copy
*   of this software and associated documentation files (the "Software"), to deal
*   in the Software without restriction, including without limitation the rights
*   to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
*   copies of the Software, and to permit persons to whom the Software is
*   furnished to do so, subject to the following conditions:
*   
*   The above copyright notice and this permission notice shall be included in
*   all copies or substantial portions of the Software.
*   
*   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
*   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
*   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
*   AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
*   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
*   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
*   THE SOFTWARE.
**/
(function ($) {
    'use strict';

    $.jInvertScroll = function(sel, options) {
        var defaults = {
            width: 40000,           // The horizontal container width
            height:4000,            // How far the user can scroll down (shorter distance = faster scrolling)
            onScroll: function(percent) {  // Callback fired when the user scrolls down, the percentage of how far the user has scrolled down gets passed as parameter (format: 0.xxxx - 1.0000)
                // do whatever you like
            }
        };

        var config = $.extend(defaults, options);

        if(typeof sel === 'Object' && sel.length > 0) {
            return;
        }

        var elements = [],
            longest = 0,
            totalHeight,
            winHeight,
            winWidth;

        function init() {
            // Extract all selected elements from dom and save them into an array
            $.each(sel, function (i, val) {
              $(val).each(function (e) {
                elements.push($(this));

                var w = $(this).width();
                if (longest < w) {
                  longest = w;
                }
              });
            });

            // Use the longest elements width + height if set to auto
            if (config.width == 'auto') {
              config.width = longest;
            }

            if (config.height == 'auto') {
              config.height = longest;
            }

            // Set the body to the selected height
            $('body').css('height', config.height + 'px');
        }

        function calc() {
          totalHeight = $(document).height();
          winHeight = $(window).height();
          winWidth = $(window).width();
        }

        function onscroll(e) {
            var currY = $(this).scrollTop();

            // Make calculations
            calc();

            var diff = totalHeight - winHeight;
            var scrollPercent = 0;

            if (diff != 0) {
              // Current percentual position
              scrollPercent = (currY / diff).toFixed(4);
            }

            // Call the onScroll callback
            if(typeof config.onScroll === 'function') {
              config.onScroll.call(this, scrollPercent);
            }

            // do the position calculation for each element
            $.each(elements, function (i, el) {
              var deltaW = el.width() - winWidth;
              if (deltaW <= 0) {
                deltaW = el.width();
              }
              var pos = Math.floor(deltaW * scrollPercent) * -1;
              el.css('left', pos);
            });
        }

        function setlisteners() {
            // Listen for the actual scroll event
            $(window).on('scroll resize', onscroll);
            $([document, window]).on('ready resize', calc);
        }


        // Init actions
        init();
        setlisteners();


        return {
            reinitialize: function() {
                init();
                setlisteners();
            },
            destroy: function() {
                // Remove previously added inline styles
                $('body').attr('style', '');

                // Remove listeners
                $(window).off('scroll resize', onscroll);
                $([document, window]).off('ready resize', calc);
            }
        };
    };
}(jQuery));



$(function() {
        var elem = $.jInvertScroll(['.scroll'],        // an array containing the selector(s) for the elements you want to animate
            {
           // height: 6000,                   // optional: define the height the user can scroll, otherwise the overall length will be taken as scrollable height
            onScroll: function(percent) {   //optional: callback function that will be called when the user scrolls down, useful for animating other things on the page
                console.log(percent);
            }
        });
        $(window).resize(function() {
          if ($(window).width() <= 768) {
            elem.destroy();
          }
          else {
            elem.reinitialize();
          }
        });
    });


/** MY OWN JQUERY**/
$(document).ready(function(){
    $('html').animate({scrollTop:0}, 1);
    $('body').animate({scrollTop:0}, 1);
});


</script>