Question

我正在尝试重现我在网上看到的效果：example。所以有两列向上滚动，一向向下滚动。见图像：

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

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);

Answer 2

multiScroll.js与您要查找的内容类似，但会触发滚动操作。

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

2 个答案: