javascript - 分屏滚动网站无法正常工作

Question

我正在尝试重新创建我在网上看到的效果:example 。因此有两列，一列向上滚动，一列向下滚动。看图片:

现在我不是最好的编码员，但我想出了这个:

var update = function () {
    $('.right').height($(window).height());
    $('.right .content').height($(window).height() * 5);
    $('.left .content').height($(window).height() * 5);
    $('.col, .content').width($(window).width() / 2);
    $('.right').scrollTop((
    $('.right .content').height() - $(window).height()) * (
    1 - $(window).scrollTop() / ($('.left .content').height() - $(window).height())));
};

$(document).ready(function () {
    update();
});
$(window).scroll(function () {
    update();
});
$(window).resize(function () {
    update();
});

参见JSfiddle ，它似乎有效，但如果我尝试向每一侧添加 100% div，它会因某些奇怪的原因而停止工作。如果我添加这些 div，右侧将不再滚动..

谁能找出问题所在吗？或者有人有更好的例子来说明如何实现这一目标吗？

提前致谢

Answer 1

我创建了一个修订版本，它允许单独的页面而不是两个长列，我认为根据您的描述，这应该满足您的需求:

JSFiddle

HTML

<div class="body">
    <div class="col left">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
    </div>
    <div class="col right">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
    </div>
</div>

CSS

html, body {
    margin:0;
    height:100%;
    width:100%;
}
.body {
    height:100%;
    position:relative;
}
.col
{
    height:100%;
    width:50%;
    display:inline-block;
    margin:0;
}
.content
{
    position:relative;
    height:100%;
}
.col.left .content:nth-child(odd) {
   background:steelblue;
}
.col.left .content:nth-child(even) {
   background:blue;
}
.col.right .content:nth-child(odd) {
   background:pink;    
}
.col.right .content:nth-child(even) {
   background:red;    
}
.col.right
{
    position:fixed;
    top:0;
    right:0;
}

JS

(function ($) {
    var top = 0;

    $(document).ready(function () {
        var contentHeight = $('.right').height(),
            contents = $('.right > .content').length;

        top = (0 - (contentHeight * (contents - 1)));

        $('.right').css('top', top + 'px');
    });

    $(window).resize(function () {
        var contentHeight = $('.right').height(),
            contents = $('.right > .content').length;

        top = (0 - (contentHeight * (contents - 1)));

        $('.right').css('top', (top + $(window).scrollTop()) + 'px');
    });

    $(window).scroll(function () {
        $('.right').css('top', (top + $(window).scrollTop()) + 'px');
    });

})(jQuery);