javascript - 使用 jQuery 检测 translate3d 的变化，如滚动功能

Question

我得到了一个脚本，它通过删除原始浏览器滚动条并使用css translate3d更改内容位置来创建平滑的滚动效果。现在我想包含一个脚本来检测translate3d 的更改，以便在每次scroll 更改时on 设置一个CSS 规则。这是我的示例代码:

$(window).on('scroll', function() {
  $('myDiv').css('color', 'red').fadeOut('slow');
});

现在我不想调用 .on('scroll', ...) 我想调用类似 .on('translate3dchange', ...) 的东西。有什么办法可以实现这一点吗？

Answer 1

假设更改发生在 style 属性中，而不是通过 css 类，那么您可以使用 MutationObserver但您必须手动检查更改的属性是 translate 还是您想要的特定属性。

const test = document.querySelector('.test');
let counter = 0;
// mimick an action altering the style of the .test element
setInterval(function() {
  test.style.transform = `translate(${++counter}px)`;
}, 500);


//const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
const transformObserver = new MutationObserver(function(mutations) {
  const styleMutation = mutations[0];
  const oldValue = styleMutation.oldValue.split(';').find(prop => prop.startsWith('transform') || prop.startsWith(' transform'));
  const current = styleMutation.target.style.transform;
  const old = ((oldValue && oldValue.split(':')[1]) || '').trim();
  if (current !== old) {
    // the translate property has been changed 
    // do what you want here
    console.log(current, old);
  }
});

transformObserver.observe(test, {
  attributes: true, //configure it to listen to attribute changes
  attributeFilter: ['style'], //configure it to limit the listening only to the style attribute
  attributeOldValue: true // keep the old value so we can compare;
});

* {
  box-sizing: border-box
}

.test {
  width: 100px;
  height: 100px;
  border: 2px solid black;
  transform: translate(1px);
}

<div class="test" style="background-image:url('somevalue');color:red;"></div>