如何用jQuery监听translate3d变化替代scroll事件实现样式控制？

好问题！原生浏览器并没有内置translate3dchange这个事件，所以没法直接像监听scroll事件那样用.on('translate3dchange', ...)，但我们可以通过手动触发自定义事件的方式实现类似效果，完美匹配你的需求。

核心思路 #

既然你的滚动逻辑是通过手动修改transform: translate3d(...)实现的，那只需要在每次更新这个样式的同时，主动触发一个自定义事件，然后在需要的地方监听这个事件即可。

具体实现步骤 #

1. 找到更新translate3d的代码位置

先定位你脚本中负责设置translate3d的代码段——这通常是自定义滚动逻辑的核心部分，比如计算滚动偏移后更新元素样式的地方。

2. 在更新样式后触发自定义事件

这里分两种方式（根据你用jQuery还是原生JS选择）：

jQuery 版本示例

假设你的滚动更新逻辑是这样的：

// 自定义滚动的核心函数：计算偏移后更新translate3d
function updateCustomScroll(yOffset) {
  const $scrollContent = $('#your-scroll-content-element');
  // 设置translate3d实现滚动
  $scrollContent.css('transform', `translate3d(0, ${-yOffset}px, 0)`);
  
  // 关键：触发自定义的translate3dchange事件，还可以传递偏移量参数
  $scrollContent.trigger('translate3dchange', [yOffset]);
}

原生JS 版本示例

如果不用jQuery，用原生事件API：

function updateCustomScroll(yOffset) {
  const scrollContent = document.getElementById('your-scroll-content-element');
  scrollContent.style.transform = `translate3d(0, ${-yOffset}px, 0)`;
  
  // 触发原生自定义事件，通过detail传递数据
  const changeEvent = new CustomEvent('translate3dchange', {
    detail: { offset: yOffset },
    bubbles: true // 允许事件冒泡，方便父元素监听
  });
  scrollContent.dispatchEvent(changeEvent);
}

3. 监听自定义事件

现在就可以像监听原生事件一样，监听我们自定义的translate3dchange事件了：

jQuery 监听示例

// 监听translate3dchange事件，执行你的业务逻辑
$('#your-scroll-content-element').on('translate3dchange', function(event, yOffset) {
  // 替换成你需要的操作，比如示例中的修改样式+淡出
  $('#myDiv').css('color', 'red').fadeOut('slow');
  // 还可以利用传递过来的偏移量做更多逻辑
  console.log('当前滚动偏移量:', yOffset);
});

原生JS 监听示例

document.getElementById('your-scroll-content-element').addEventListener('translate3dchange', function(event) {
  const yOffset = event.detail.offset;
  document.getElementById('myDiv').style.color = 'red';
  // 这里可以自己实现fadeOut效果，或者用CSS过渡
});

额外注意事项 #

• 如果你的自定义滚动是用第三方库实现的，先看看库本身有没有提供滚动回调（比如onScroll钩子），可以直接在回调里触发自定义事件，不用自己修改库的源码。
• 确保触发事件的元素和监听事件的元素一致，或者开启事件冒泡（原生事件设置bubbles: true），这样父元素也能监听到。
• 避免频繁触发事件：如果你的滚动逻辑是高频执行的（比如每帧更新），可以考虑做节流处理，防止事件触发太频繁导致性能问题。

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