Question

我创建了一个垂直分为两列的网站（每一半都是屏幕）。如果我向下滚动，将光标放在网站上的任何位置，左列应该正常并向下滚动，同时右列应向上向相反方向滚动。

我出现了这个问题 - Modify scroll direction - 并尝试从中获得解决方案，但我无法让它发挥作用。

这就是我尝试过的：http://jsbin.com/UJEBohu/1/edit

Answer 1

我已经制定了一个有效的解决方案：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有多高，都可以更新工作。

Answer 2

每次滚动时，不同的浏览器都会滚动不同的数量。

这是我更新的fiddle我还没有在野生动物园尝试过。我在鼠标滚轮上使用绑定，因为每次滚动一次时Mozilla的滚动事件会多次触发。

首先，我检查一下我们正在使用哪个浏览器，并设置每个滚动条对该浏览器的影响程度。然后我根据每个浏览器的滚动量来计算移动右边div的数量。

在鼠标滚轮事件中，我检查以确保正确的div不会远离屏幕下方或上方。

我正在使用event.originalEvent.detail来判断鼠标滚轮在mozilla中的方向，在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});
               }
             }
          });
      });

同时滚动一个div和一个？

2 个答案: