我创建了一个站点，该站点垂直分为两列（每列占屏幕的一半）。如果我向下滚动，将光标放在网站上的任何位置，左列应该表现正常并向下滚动，同时右列应该在相反方向向上滚动。
我提出了这个问题 - Modify scroll direction - 并试图从中找到解决方案，但我无法让它发挥作用。
这是我尝试过的：http://jsbin.com/UJEBohu/1/edit
【问题讨论】：
overflow:scroll 怎么样？）
标签： javascript jquery html css scroll
我已经制定了一个可行的解决方案，在这里：http://jsfiddle.net/QDUyR/1/
把它放在你的<body> onload 事件中，你应该被设置好了:)
// Add event listener for scrolling
$("#left").on("scroll", function () {
var scrolledleft = parseInt($("#left").scrollTop()) * -1;
console.log(scrolledleft + scrolledright)
$("#right").scrollTop(scrolledleft + scrolledright)
})
//Move right column to bottom initially
$("#right").scrollTop($("#right").height())
//Get actual distance scrolled
var scrolledright = parseInt($("#right").scrollTop())
编辑：无论 div 的高度是多少，只要它们相等，都可以更新。
【讨论】：
每次滚动时，不同的浏览器都会滚动不同的量。
这是我更新的fiddle 我还没有在 safari 中尝试过。 我在鼠标滚轮上使用绑定，因为每次滚动一次时，Mozilla 的滚动事件都会触发多次。
首先，我检查我们正在使用哪个浏览器，并设置该浏览器的每次滚动量。然后我根据每个浏览器的滚动量计算右 div 的移动量。
在鼠标滚轮事件中，我检查以确保右侧 div 不会远远低于或高于屏幕。
我在 mozilla 中使用 event.originalEvent.detail 来判断鼠标滚轮的方向，在 IE 和 Chrome 中我使用 event.originalEvent.wheelDelta。
下面是代码。
$(function()
{
if (navigator.userAgent.indexOf('Firefox') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Firefox') + 8)) >= 3.6)
{
//Firefox
var eachScroll = 114;
}
else if (navigator.userAgent.indexOf('Chrome') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Chrome') + 7).split(' ')[0]) >= 15)
{
//Chrome
var eachScroll = 100;
}
else if(navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Version') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Version') + 8).split(' ')[0]) >= 5)
{
//Safari
}
else
{
//IE
var eachScroll = 94;
}
var windowHeight = $(window).height();
var containerHeight = $("#container").height();
var heightLeftover = containerHeight - windowHeight; // Actual amount left to scroll
var totalScrolls = heightLeftover / eachScroll; // Total number of scrolls
totalScrolls = Math.ceil(totalScrolls); // Always round up
var amountToScroll = ($("#right").height() - containerHeight) / totalScrolls;
// Amount that right div will move every time we scroll
$(window).bind("mousewheel DOMMouseScroll", function(event){
var top = $("#right").position().top;
if(event.originalEvent.wheelDelta) // Check if wheelDelta exists
{
if(event.originalEvent.wheelDelta == - 120)
{
if(top < 2)
$("#right").css({top: top + amountToScroll});
}
else
{
if(top > -2000)
$("#right").css({top: top - amountToScroll});
}
}
else if(event.originalEvent.detail) // check if detail exists
{
if(event.originalEvent.detail == 3)
{
if(top < 2)
$("#right").css({top: top + amountToScroll});
}
else
{
if(top > -2000)
$("#right").css({top: top - amountToScroll});
}
}
});
});
【讨论】：