求助：ScrollMagic.controller不是构造函数错误（附完整代码）

嘿，刚看完你的问题，这个错误其实是新手用ScrollMagic很容易踩的小坑！咱们一步步把问题搞定：

核心错误：构造函数大小写写错了 #

你代码里写的是：

let controller = new ScrollMagic.controller();

但ScrollMagic的控制器构造函数是大写开头的Controller，正确写法应该是：

let controller = new ScrollMagic.Controller();

这就是你看到Uncaught TypeError: ScrollMagic.controller is not a constructor的直接原因——JavaScript对大小写是敏感的，找不到小写的controller构造函数，就报错啦。

还有几个小问题也得一起修正 #

除了上面的核心错误，你的代码里还有几个细节问题会导致后续功能不正常：

• addIndicators没加括号：你写的.addIndicators是引用方法，不是调用方法，得改成.addIndicators()才能显示调试指示器。
• 变量名大小写不一致：最后定时器里的Video.currentTime要改成video.currentTime（小写v），和你前面定义的const video变量保持一致。
• textAnim定义顺序不对：你在创建scene2的时候用到了textAnim，但textAnim是在后面才定义的，得把它移到scene2前面，不然会出现textAnim is not defined的错误。

修正后的完整JavaScript代码 #

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

// 先定义文本动画，避免后续引用时未定义
const textAnim = TweenMax.fromTo(text, 3, {opacity: 1}, {opacity: 0});

//scroll magic - 修正构造函数大小写
let controller = new ScrollMagic.Controller();
//scene
const scene = new ScrollMagic.Scene({
    duration:9000,
    triggerElement: intro,
    triggerHook: 0
})
.addIndicators() // 加括号调用方法
.setPin(intro)
.addTo(controller);

let scene2 = new ScrollMagic.Scene({
    duration: 3000,
    triggerElement: intro,
    triggerHook: 0
})
.setTween(textAnim)
.addTo(controller);

//vid animation
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);

把这些修改完成后，你的代码应该就能正常运行啦！作为编程新手，记住JavaScript对大小写极其敏感，还有变量的定义顺序也很重要哦～

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