如何仅在页面的一部分上实现jInvertScroll插件

Question

我正在使用jInvertScroll插件在页面中间的某些幻灯片上水平滚动，但是该插件希望从页面顶部开始滚动水平内容。如何使页面停止并在所需部分水平滚动，然后在水平内容的末尾返回垂直滚动？

horizontal scrolling jquery working on entire page

我试图从这些答案中得出结论，但是它们似乎没有用。

HTML     

<h1>jInvertScroll Example</h1>


<div class="middle scroll">
    <img src="images/middle.png" alt="" />
</div>
<div class="front scroll">
    <img src="images/front.png" alt="" />
</div>

<script type="text/javascript" 
src="./jInvertScroll/libs/jquery.min.js"></script>
<script type="text/javascript" 
src="./jInvertScroll/dist/js/jquery.jInvertScroll.js"></script>
<script type="text/javascript">
(function($) {
    $.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);
        }
    });
}(jQuery));
</script>
</div>


CSS
/* JInvertScroll */

body
{
  overflow-x: hidden;
}

/**
  * important: keep position fixed, you can however use top:0 
instead of bottom:0
  * if you want to make it stick to the top of the browser
  */
.scroll
{
  position: fixed;
  bottom:0;
  left: 0;
}

/**
  * z-index ordering of the different layers, do this for your 
layers,
  * also assign absolute width (to prevent issues if the script gets 
executed before the images get loaded)
  */
.horizon
{
  z-index: 1;
  width: 3000px;
.middle
{
  z-index: 500;
  width: 4000px;
}

.front
{
  z-index: 1000;
  width: 6000px;
}
.page {
    top: 0px;
    width: 500px;
    background: white;
    padding: 10px 30px;
    border: 1px #eee solid;
    position: absolute;
}

.slide {
    left: 2450px;
    width: 700px;
}