同时滚动多个元素

Question

我遇到了一个难题。我有一个小项目：

(链接已删除)

当你将浏览器宽度缩小到移动设备大小时，你会看到很多水平滚动条，你可以水平滚动。我的问题是，如何让所有的项目都跟随一个项目的水平滚动？我已经尝试了以下方法：

$('.container').scroll(function(){
    $('.container').scrollLeft($(this).scrollLeft());    
})

但我一直在走弯路。任何帮助都将不胜感激。

更新

结果发现，当页面加载完成后，将代码放入控制台中确实可以工作。 我采取了以下措施:

$(document).on('scroll', '.container', function(){
    $('.container').scrollLeft($(this).scrollLeft());    
});

更新2

非常感谢@George和所有给我指路的人。这些表格是使用jQuery加载的：

$(this).next().load("/availability_Dev/availability_Dev.asp?stuff="+stuff+"");

我只需要在元素加载后附加我的滚动代码，就像这样：

$(this).next().load("/availability_Dev/availability_Dev.asp?stuff="+stuff+"", function(){
     $('.container').scroll(function(){
         $('.container').scrollLeft($(this).scrollLeft());    
     });
});

- Akira Dawson

---

滚动事件无法在DOM中冒泡，因此您无法委派它。您需要在.container元素加载到DOM后，附加处理程序。 - George

@George，你能用代码形式表达一下吗？先谢谢了。 - Akira Dawson

你已经完成了。你的代码是正确的，你只需要在项目被添加后运行它（你需要知道何时添加，可能是一个 AJAX 回调），而不是在文档加载时运行。 - George

@George 我现在明白了。我目前正在寻找创建表格并在其后添加事件的代码。 - Akira Dawson

Answer 1

您说页面加载后在控制台运行可行。那么，可以尝试一下以下步骤。

$(document).ready(function(){
  $(document).on('scroll', '.container', function(){
    $('.container').scrollLeft($(this).scrollLeft());    
  });
});

或者使用以下代码：

$(document).ready(function(){
  $('.container').scroll(function(){
    $('.container').scrollLeft($(this).scrollLeft());    
  });
});

希望这可以帮到你。

- Rishabh Shah

---

我已经尝试了这两个示例，但仍然无法正常工作。你回答中的第一个示例就是我当前示例页面上的内容。 - Akira Dawson

Answer 2

请尝试这个。

$('.container').scroll(function(){
  var scrolled = $(this);
  $('.container').each(function() {
    $(this).scrollLeft(scrolled.scrollLeft());    
  })
})

希望它有所帮助。

- kdlcruz

---

它确实如此，不过还是感谢您的输入。非常感激。 - Akira Dawson