1

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

我提出了这个问题—— 修改滚动方向——并试图从中找到解决方案，但我无法让它发挥作用。

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

4

2 回答 2

0

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

这是我更新的小提琴，我还没有在 safari 中尝试过。我在鼠标滚轮上使用绑定，因为每次滚动一次时，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});
               }
             }
          });
      });
于 2013-10-29T20:45:15.703 回答
0

我在这里制定了一个可行的解决方案：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 的高度如何，只要它们相等，都可以更新。

于 2013-10-29T20:12:52.343 回答