JavaScript中函数内const变量myscroll无法使用的问题求助
2026-5-8
为什么定义的
const myscroll无法正常工作？ 嘿，这个问题其实挺常见的，核心原因出在DOM加载的时机上，我给你拆解下：
问题根源
你写的失效代码里，const myscroll = document.querySelector('.scrollup');这段代码执行得太早了！如果你的JS脚本是放在HTML的<head>标签里，或者页面DOM元素还没渲染完成就运行了这段代码，浏览器还没解析到.scrollup这个元素，导致myscroll拿到的是null。后面你尝试操作null.style.display的时候，浏览器其实已经悄悄报错了（你可以打开控制台F12看看，肯定能看到类似"Cannot set properties of null"的错误），所以按钮自然不会正常显示/隐藏。
而你能正常运行的代码，是每次触发滚动事件时才调用document.querySelector('.scrollup')，这时候页面DOM已经完全加载完成了，每次都能准确找到目标元素，所以逻辑能正常执行。
解决方法
你只需要确保获取元素的代码在DOM完全加载完成后再执行就行，有几种常用的方式：
方式1：把JS脚本放在页面底部
直接把你的脚本放到</body>标签的前面，这样浏览器会先渲染完所有DOM元素，再执行JS代码：
<body> <!-- 页面所有内容 --> <script> const myscroll = document.querySelector('.scrollup'); window.onscroll = function () {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) { myscroll.style.display = "block"; } else { myscroll.style.display = "none"; } }; </script> </body>
方式2：监听DOMContentLoaded事件
把代码包裹在DOMContentLoaded事件回调里，这个事件会在DOM结构加载完成后立即触发（不需要等待图片、样式表等外部资源加载）：
document.addEventListener('DOMContentLoaded', function() { const myscroll = document.querySelector('.scrollup'); window.onscroll = scrollFunction; // 这里可以简化写法，不用套匿名函数 function scrollFunction() { const shouldShow = document.body.scrollTop > 800 || document.documentElement.scrollTop > 800; myscroll.style.display = shouldShow ? "block" : "none"; // 也可以用三元表达式简化代码 }; });
这样修改后，你的const myscroll就能正常获取到元素，逻辑也能正常运行啦～
内容的提问来源于stack exchange，提问作者Lo1176
相关产品推荐
相关产品推荐
