JQuery ScrollTop（）在窗口事件上工作，但不是div（在Chrome中测试） [英] JQuery ScrollTop() works on window event but not div (tested in chrome)

问题描述

在此刻工作

https://www.cliquenext.com/sandbox.php

我们有两个div列。 #mainpage（在右边）和#sidebar在左边。

目标是如果我在右栏滚动，左栏也滚动。
如果我在左栏滚动，右栏也滚动。两者在同一时间。

当我使用$（window）.ScrollTop时 - 它工作正常。
当我使用$（＃sidebar）。Scrolltop - 它并没有触发。

以下代码在滚动#sidebar时可以滚动#mainpage。 （）;

  $（＃sidebar）。scroll（function（event）{
 event.preventDefault（）; 
 
 var st = $（this）.scrollTop（）; 
 if（st> lastScrollTop）{
 //减小滚动代码
 
 var y = $（窗口）.scrollTop（）; //您当前在页面上的y位置
 $（window）.scrollTop（y + 10）; 
 
} else {
 // upscroll代码
 
 var y = $（window）.scrollTop（）; //您当前在页面上的y位置
 $（window）.scrollTop（y-10）; 
 
 
} 
 lastScrollTop = st; 
}）; 
  

以下代码无效。在＃主页上滚动时，＃边栏也应该滚动。但它不是。

  $（＃mainpage）。scroll（function（event）{
 event.preventDefault （）; 
 
 var st2 = $（this）.scrollTop（）; 
 if（st2> lastinfoscroll）{
 //减小滚动代码
 $ b $您可以在页面上显示当前的y位置
 $（＃sidebar）。scrollTop（y + 10）; 
 
 $ else $ {
 //向上滚动代码
 
 var y = $（＃sidebar）。scrollTop（）; //您当前在页面上的y位置
 $ （#sidebar）。scrollTop（y-10）; 
 
 
} 
 lastinfoscroll = st2; 
}）; 
  

我想要检测其中一个div是否正在滚动，然后滚动这两个div。 / p>

我似乎无法弄清楚如何在div上触发它，以便我可以一次滚动两个div。多年来一直困在这个问题上。也不想使用Animate。

任何帮助将不胜感激。
干杯

解决方案

.scroll（） divs和 .scrollTop（）也可以在它们上运行。你可以简化你的代码：移除滚动位置缓存，并计算当前位置和期望位置，问题消失：）下面的代码片段同步滚动位置所有 $容器：

  $（function（）{
 var $ containers = $（.container）; 
 
 $ containers.scroll（_.throttle（syncScroll，20，{leading：false}））; 
 
函数syncScroll（）{
 var $ this = $（this），
 $ other = $ containers.not（this），
 target = $ this.scrollTop（）; 
 
 if（$ other.scrollTop（）！== target）{
 $ other.scrollTop（target）; 
} 
 
} 
 
}）; 
  

您可以在本演示（代码视图）。

调节很重要，否则使用鼠标滚轮滚动的惯性将会消失（并且您会使用垃圾滚动事件）。我在这里使用下划线（ _。throttle（） ），但是任何其他实现都可以。您可以使用第二个参数来控制延迟范围，当前设置为20ms。

这里的示例同步绝对滚动位置，所以它意味着滚动的内容是到处都是同一个高度。对于不同高度的内容，您需要经过快速转换并以百分比表示目标位置，然后将其转换回绝对值以滚动 $ other 框到。

Working on this page at the moment

https://www.cliquenext.com/sandbox.php

We have two div columns. #mainpage (to the right) and #sidebar to the left.

The aim is that if I scroll in the right column, the left scrolls too. If I scroll in the left column, the right scrolls too. Both at the same time.

When I use $(window).ScrollTop - it works fine. When I use $("#sidebar").Scrolltop - it doesnt fire.

The following code works scrolling #mainpage when scrolling #sidebar.

$("#sidebar").scroll(function(event){
   event.preventDefault();  

   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       // downscroll code

       var y = $(window).scrollTop();  //your current y position on the page
       $(window).scrollTop(y+10);

   } else {
      // upscroll code

        var y = $(window).scrollTop();  //your current y position on the page
       $(window).scrollTop(y-10);


   }
   lastScrollTop = st;
});

The following code doesn't work. When scrolling on #mainpage the #sidebar should scroll too. But its not.

$("#mainpage").scroll(function(event){
   event.preventDefault();  

   var st2 = $(this).scrollTop();
   if (st2 > lastinfoscroll){
       // downscroll code

       var y = $("#sidebar").scrollTop();  //your current y position on the page
       $("#sidebar").scrollTop(y+10);

   } else {
      // upscroll code

        var y = $("#sidebar").scrollTop();  //your current y position on the page
      $("#sidebar").scrollTop(y-10);


   }
   lastinfoscroll = st2;
});

I would like to detect when one of the divs are being scrolled, and then scroll both divs.

I can't seem to figure out how to get it fire on divs so that I can scroll both divs at once. Been stuck on this problem for ages. Also don't want to use Animate.

Any help would be greatly appreciated. Cheers

解决方案

.scroll() does fire on divs, and .scrollTop() does work on them, too. You can simplify your code: remove scroll position caching, and the calculation of current vs desired position, and the problem goes away :)

The snippet below synchronizes the scroll position in all $containers:

$( function () {
  var $containers = $( ".container" );

  $containers.scroll( _.throttle( syncScroll, 20, { leading: false } ) );

  function syncScroll () {
    var $this = $( this ),
        $other = $containers.not( this ),
        target = $this.scrollTop();

    if ( $other.scrollTop() !== target ) {
      $other.scrollTop( target );
    }

  }

} );

You can see it in action in this demo (code view).

Throttling is important, otherwise the inertia of scrolling with a mouse wheel would vanish (and you'd flood the CPU with garbage scroll events). I'm using Underscore here (_.throttle()), but any other implementation will do. You can control the extent of the lag with the second argument, currently set to 20ms.

The example here synchronizes the absolute scroll position, so it implies that the scrolled content is of the same height everywhere. For content of differing height, you need to go through a quick conversion and express the target position as a percentage, before converting it back to an absolute value to scroll the $other box to.

这篇关于JQuery ScrollTop（）在窗口事件上工作，但不是div（在Chrome中测试）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！