如何在点击元素时禁用parallax.js并保持元素当前位置

场景1：点击单个指定类元素，让该元素单独停用视差并固定当前位置 #

这种方式仅让被点击元素停止视差效果，其他元素仍正常工作：

// 获取所有需要绑定点击事件的目标元素
const targetElements = document.querySelectorAll('.back, .front');

// 为每个元素绑定点击事件
targetElements.forEach(el => {
  el.addEventListener('click', function() {
    // 保存当前元素的位置样式
    const currentTransform = window.getComputedStyle(this).transform;
    // 移除视差标记，让元素不再参与视差计算
    this.removeAttribute('data-depth');
    // 固定当前位置
    this.style.transform = currentTransform;
    // 可选：若要彻底将元素从Parallax实例中移除，可调用此方法
    // parallax.removeElement(this);
  });
});

场景2：点击指定类元素，禁用整个场景的视差并保留所有元素当前位置 #

如果需要让整个视差场景停止，同时所有元素停在当前位置（而非回到初始状态），可以用以下代码：

const targetElements = document.querySelectorAll('.back, .front');

targetElements.forEach(el => {
  el.addEventListener('click', function() {
    // 先保存所有视差元素的当前位置
    const sceneElements = scene.querySelectorAll('[data-depth]');
    const elementPositions = [];
    sceneElements.forEach(item => {
      elementPositions.push({
        el: item,
        transform: window.getComputedStyle(item).transform
      });
    });
    
    // 调用Parallax的disable方法禁用整个场景
    parallax.disable();
    
    // 还原所有元素的位置，避免重置到初始状态
    elementPositions.forEach(item => {
      item.el.style.transform = item.transform;
    });
  });
});

关键说明 #

Parallax.js原生的parallax.disable()方法会默认将所有元素重置到初始位置，因此我们需要先通过window.getComputedStyle()获取元素当前的transform样式，禁用视差后再手动还原，以此实现“停在当前位置”的需求。

内容的提问来源于stack exchange，提问作者Alper Burak PUSAR