首次使用GSAP：函数已执行但scrollLeft动画未生效求助

核心错误点 #

1. 滚动容器选择错误
   你将单个评价卡片（avis1/avis2/avis3）作为scrollLeft动画的目标元素，但实际具备横向滚动能力的是它们的父容器.avis__sur-3s——只有这个元素设置了overflow-x: auto，是真正的滚动容器。

2. 滚动位置计算错误
   原代码中targetElement.offsetLeft获取的是目标元素相对于其直接父元素的位置，但滚动容器的scrollLeft需要的是目标元素相对于滚动容器内部的偏移量，直接使用会导致位置计算偏差。

修正后的完整代码 #

// 获取正确的滚动容器
const scrollContainer = document.querySelector('.avis__sur-3s');

const avis1 = document.getElementById('avis1');
const avis2 = document.getElementById('avis2');
const avis3 = document.getElementById('avis3');

const b1_2 = document.getElementById('b1_2');
const b2_3 = document.getElementById('b2_3');
const b2_1 = document.getElementById('b2_1');
const b3_2 = document.getElementById('b3_2');

// 统一绑定点击事件，传入滚动容器和目标卡片
b1_2.addEventListener('click', () => scrollAvis(scrollContainer, avis2));
b2_3.addEventListener('click', () => scrollAvis(scrollContainer, avis3));
b2_1.addEventListener('click', () => scrollAvis(scrollContainer, avis1));
b3_2.addEventListener('click', () => scrollAvis(scrollContainer, avis2));

function scrollAvis(container, targetElement) {
    // 计算目标卡片相对于滚动容器的正确偏移量
    const targetPosition = targetElement.offsetLeft - container.offsetLeft;
    gsap.to(container, {
        scrollLeft: targetPosition,
        duration: 0.5,
        ease: "power3.out"
    });
    console.log("executed");
}

额外注意事项 #

• 确保已正确引入GSAP库，若未引入，需在HTML头部添加：

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
  

• 若需要更复杂的滚动控制（如对齐容器边缘），可使用GSAP的ScrollToPlugin，但基础版本的GSAP已支持上述scrollLeft动画逻辑。

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