ScrollMagic.controller非构造函数错误求助（跟随Dev ED教程）

Hey there! Let's fix that error you're seeing—this is a super common gotcha with ScrollMagic, especially when you're just starting out. Let's break down the issues step by step:

1. 核心错误：构造函数大小写拼写错误 #

JavaScript是大小写敏感的，你代码里的new ScrollMagic.controller()写错了——ScrollMagic的控制器构造函数首字母必须大写：ScrollMagic.Controller()。这个拼写错误直接触发了你看到的TypeError。

修复后的代码行：

let controller = new ScrollMagic.Controller();

2. 其他需要修复的小问题 #

除了核心错误，还有几个细节问题会导致你的代码无法正常运行：

a. addIndicators缺少调用括号 #

你写的.addIndicators只是引用了方法本身，没有执行它，必须加上括号才能生效：

.addIndicators() // 这里必须加()
.setPin(intro)
.addTo(controller);

b. textAnim必须先定义再使用 #

你在scene2里提前使用了textAnim，但这个变量是在后面才赋值的。JavaScript会提升变量声明，但不会提升赋值内容，所以要把textAnim的定义移到scene2之前：

// 先定义文本动画
const textAnim = TweenMax.fromTo(text, 3, {opacity: 1}, {opacity: 0});

// 再创建scene2
let scene2 = new ScrollMagic.Scene({ // 注意Scene的首字母也要大写！
  duration: 3000,
  triggerElement: intro,
  triggerHook: 0
})
.setTween(textAnim)
.addTo(controller);

哦对了，ScrollMagic.scene也要改成ScrollMagic.Scene（首字母大写），这也是ScrollMagic API的要求。

c. Video.currentTime变量大小写错误 #

你在定时器里写的Video.currentTime，但之前定义的视频变量是小写的video，所以要统一成小写：

video.currentTime = delay;

修复后的完整JavaScript代码 #

把所有修复整合后，你的main.js应该是这样的：

const intro = document.querySelector('.intro');
const video = intro.querySelector('video');
const text = intro.querySelector('h1');
// end marker
const section = document.querySelector('section');
const end = section.querySelector('h1');

// 先定义文本动画，确保scene2能调用到
const textAnim = TweenMax.fromTo(text, 3, {opacity: 1}, {opacity: 0});

// 初始化ScrollMagic控制器（修复大小写）
let controller = new ScrollMagic.Controller();

// 创建第一个场景（修复Scene大小写和addIndicators括号）
const scene = new ScrollMagic.Scene({
  duration:9000,
  triggerElement: intro,
  triggerHook: 0
})
.addIndicators()
.setPin(intro)
.addTo(controller);

// 创建第二个场景（修复Scene大小写）
let scene2 = new ScrollMagic.Scene({
  duration: 3000,
  triggerElement: intro,
  triggerHook: 0
})
.setTween(textAnim)
.addTo(controller);

// 视频滚动同步逻辑
let accelamount = 0.1;
let scrollpos = 0;
let delay = 0;
scene.on('update', e =>{
  scrollpos = e.scrollPos / 1000;
});
setInterval(() => {
  delay += (scrollpos - delay) * accelamount;
  console.log(scrollpos, delay);
  video.currentTime = delay; // 修复变量大小写
}, 33.3);

总结一下出错的原因 #

• ScrollMagic的API严格区分大小写，所有构造函数（Controller、Scene）首字母必须大写
• JavaScript变量需要先定义赋值，再在代码中使用
• 方法调用必须加括号，否则只是引用方法，不会执行它

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