Question

我喜欢为特定列更改相反方向的滚动方向。我试着搜索谷歌，但我找不到任何解决方案。举个例子，拿这个......

有三列，

左，中，右。每列高度为5000px。中心列的负边距为4500px。现在当用户滚动时，左右应该像往常一样，但是中心应该从下到上滚动。希望你明白了。

示例网站：http://www.ballantyne.it/

.left{
height:5000px;
}

.center{
height:5000px;
margin-top:-4500px;
}

.right{
height:5000px;
}

Answer 1

你必须为中心列添加一个容器，将它的溢出设置为隐藏，高度设置为窗口的高度，然后使用$(window).scroll()事件追加$(document).height() - $(window).scrollTop()到中心列 - 这应该适合你< / p>

编辑：这是代码http://jsfiddle.net/yLHeC/30/和解释：

$(document).ready(function(){
    var CONSTANT_OFFSET = -200; // starting position
    $(window).scroll(function(){
       $('.center').css('margin-top', CONSTANT_OFFSET + $(this).scrollTop()*2 + 'px'); 
    }).scroll();
});

Answer 2

在我的例子中，滚动位置被锁定到相邻列的高度，因此移动量是比率的计算，因此是精确的。

http://jsfiddle.net/kuxi/xNSTb/

$('.right').scrollTop(
    ($('.right .content').height() - $(window).height())
    *
    ( 1 - $(window).scrollTop() / ($('.left .content').height() - $(window).height()))
);

如何更改滚动方向

2 个答案: