滚动实现元素旋转效果报Cannot read properties of null (reading 'style')排查

报错本质 #

你遇到的Uncaught TypeError: Cannot read properties of null (reading 'style')错误，核心原因是JS执行时没有成功获取到对应DOM元素，赋值给elem的是null，自然无法读取style属性。

具体错误点排查 #

• 选择器大小写不匹配、语法错误
  HTML中div的class是全小写的logojakob，你测试时使用的.logoJakob首字母大写，和实际类名不一致无法匹配；初始写法document.querySelector("logoJakob")没有加类选择器前缀.，被识别为标签选择器，自然找不到元素；另外document.getElementByClassName是拼写错误，正确写法是document.getElementsByClassName（多了个s），且该方法返回的是DOM集合，需要取索引[0]才能拿到单个元素使用。
• JS执行时机早于DOM渲染
  如果你的JS代码放在页面头部、或者在目标div渲染之前就加载执行，哪怕选择器写对了也拿不到还没生成的DOM元素。

修复方案 #

第一步：修正选择器，调整JS执行时机 #

把原有JS替换为以下代码即可：

// 等待页面DOM全部渲染完成后再执行逻辑
document.addEventListener('DOMContentLoaded', function() {
    // 优先使用id选择器，匹配唯一元素
    const elem = document.getElementById('jakoblogo');
    // 增加非空判断，避免极端场景报错
    if (!elem) return;
    window.addEventListener('scroll', function() {
        const value = window.scrollY * 0.25;
        // 注意CSS属性名大小写规范，translateX/Y首字母大写
        elem.style.transform = `translateX(-50%) translateY(-50%) rotate(${value}deg)`;
    });
});

可选优化：调整定位参数 #

如果实现旋转后发现元素位置偏移，可以在CSS的.logojakob规则中补充定位基准：

.logojakob {
  position: fixed;
  /* 补充定位基准，配合translate实现居中效果 */
  top: 75px;
  left: 75px;
  width:150px;
  height:150px;
  margin-top:50px;
  margin-bottom:-300px;
  margin-left:50px;
}

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