如何在水平滚动时输出jQuery中内层容器的scrollLeft值？

你现在的代码监听的是window的滚动事件，但实际产生水平滚动的是包裹.content的外层容器（也就是那个设置了overflow-x: auto的父元素），所以自然拿不到正确的scrollLeft值啦。

正确的实现方式 #

首先要找到那个实际发生滚动的容器（通常是包裹.content、设置了overflow-x: auto/scroll的父元素），然后监听它的scroll事件，再获取它的scrollLeft值：

$(function(){
  // 替换成你实际的滚动容器选择器，比如包裹.content的元素
  $('.scroll-container').scroll(function(){
    console.log($(this).scrollLeft());
  });
});

如果你的.content本身就是滚动容器（比如它自身设置了宽度限制和overflow-x: auto），也可以直接监听它的滚动事件：

$(function(){
  $('.content').scroll(function(){
    console.log($(this).scrollLeft());
  });
});

为什么原代码无效？ #

window的scroll事件对应的是整个页面的滚动行为，而你的水平滚动是发生在页面内部的独立容器上，两者的滚动状态是完全分开的。所以只有监听那个具体滚动容器的事件，才能获取到它的水平滚动偏移量。

内容的提问来源于stack exchange，提问作者ttmt