[英]JavaScript Code not running on a Live Sever nor Local Host
我连续几天一直在寻找这个解决方案，但我找不到为什么 Javascript 不能在实时服务器扩展或本地文件主机上正确运行的答案。 我使用 Visual Studio Code，目前正在创建一个网页并尝试在其上添加 JavaScript 动画。 然而，它已经到了我决定复制其他人的 JS 动画以查看它是否适合我的地步，但它仍然没有。 对于这段代码，我确保控制台中没有任何错误，并且 JS 在 Visual Studio 代码上正常工作。 两者都有效，但动画无效。 这是我从https://webdesign.tutsplus.com/tutorials/animate-on-scroll-with-javascript--cms-36671获取的简单 JS animation 的代码。
注意：即使将其输入到代码片段中，它似乎也可以运行，但它永远不会在实时服务器或本地主机上运行
const scrollElements = document.querySelectorAll(".js-scroll"); const elementInView = (el, dividend = 1) => { const elementTop = el.getBoundingClientRect().top; return ( elementTop <= (window.innerHeight || document.documentElement.clientHeight) / dividend ); }; const elementOutofView = (el) => { const elementTop = el.getBoundingClientRect().top; return ( elementTop > (window.innerHeight || document.documentElement.clientHeight) ); }; const displayScrollElement = (element) => { element.classList.add("scrolled"); }; const hideScrollElement = (element) => { element.classList.remove("scrolled"); }; const handleScrollAnimation = () => { scrollElements.forEach((el) => { if (elementInView(el, 1.25)) { displayScrollElement(el); } else if (elementOutofView(el)) { hideScrollElement(el) } }) } window.addEventListener("scroll", () => { handleScrollAnimation(); });
<style> @import url("https://fonts.googleapis.com/css2?family=Merriweather&family=Merriweather+Sans:wght@300&display=swap"); /*General styling for structure*/ body { margin: 0; font-family: "Merriweather Sans", sans-serif; }.container { max-width: 1280px; width: 95%; margin: 0 auto; } header { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; font-family: "Merriweather", serif; height: 100vh; } header h2 { font-weight: 400; }.scroll-container { height: 100vh; min-height: 450px; padding: 2rem 1rem; display: flex; align-items: center; box-sizing: border-box; }.scroll-container:nth-of-type(1) { background-color: #bdd0c4; }.scroll-container:nth-of-type(2) { background-color: #f5d2d3; }.scroll-container:nth-of-type(3) { background-color: #9ab7d3; }.scroll-container:nth-of-type(4) { background-color: #dfccf1; }.scroll-container:nth-of-type(even) { flex-direction: row-reverse; }.scroll-element, .scroll-caption { width: 50%; }.scroll-element { min-height: 300px; height: 100%; background-color: #eaeaea; }.scroll-caption { margin: 1rem; } footer { text-align: center; padding: 0.5rem 0; background-color: #faddad; } footer p { font-size: 0.75rem; margin: 0.25rem 0; color: #221133; } footer a { text-decoration: none; color: inherit; } @media screen and (max-width: 650px) {.scroll-container, .scroll-container:nth-of-type(even) { flex-direction: column; align-content: inherit; }.scroll-element { height: 100%; }.scroll-element, .scroll-caption { width: 100%; } } /**Styling scrollable elements*/.js-scroll { opacity: 0; transition: opacity 500ms; }.js-scroll.scrolled { opacity: 1; }.scrolled.fade-in { animation: fade-in 1s ease-in-out both; }.scrolled.fade-in-bottom { animation: fade-in-bottom 1s ease-in-out both; }.scrolled.slide-left { animation: slide-in-left 1s ease-in-out both; }.scrolled.slide-right { animation: slide-in-right 1s ease-in-out both; } @keyframes slide-in-left { 0% { -webkit-transform: translateX(-100px); transform: translateX(-100px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes slide-in-right { 0% { -webkit-transform: translateX(100px); transform: translateX(100px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes fade-in-bottom { 0% { -webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
<head></head> <body> <header class="container"> <h1>How to Animate on Scroll With Vanilla JavaScript</h1> <h2>Scroll to see the effects <p class="animate-arrow">↓ </p> </h2> </header> <section class="scroll-container"> <div class="scroll-element js-scroll fade-in"> </div> <div class="scroll-caption"> This animation fades in. </div> </section> <section class="scroll-container"> <div class="scroll-element js-scroll fade-in-bottom"> </div> <div class="scroll-caption"> This animation slides in to the top. </div> </section> <section class="scroll-container"> <div class="scroll-element js-scroll slide-left"> </div> <div class="scroll-caption"> This animation slides in from the left. </div> </section> <section class="scroll-container"> <div class="scroll-element js-scroll slide-right"> </div> <div class="scroll-caption"> This animation slides in from the right. </div> </section> <footer> <p>Animation styles from <a href="https://animista.net" target="_blank">animista.net</a></p> <p> Pen by <a href="https://www.jemimaabu.com" target="_blank">Jemima Abu</a><span style="color: #D11E15"> ♥</span> </p> </footer> </body>
谢谢所有回答我问题的人-
答案很简单，实际上是 StackSlave 提到的
脚本标签在头部而不是 html 文件的末尾。 解决这个问题的方法是在脚本标签的末尾添加“defer”。 JS 现在完美运行。
是否有运行Javascript的本地运行时环境？ （比如JScript的Windows Scripting Host）
[英]Is there a local runtime environment for running Javascript? (like Windows Scripting Host for JScript)
如何在运行实时服务器的情况下在 Visual Studio Code 中调试 JavaScript
[英]How to Debug JavaScript in Visual Studio Code with live-server Running
告诉 Javascript 代码应用程序是在远程主机还是本地主机中运行
[英]Tell Javascript code whether the App is running in remote host or localhost
在应用程序内部运行JS代码的Win8 Live Tile的本地推送通知
[英]Local push notification to Win8 Live Tile running JS code inside app
为什么“scrollTop”function 在现场无法正常工作，但在本地主机上工作？
[英]Why is "scrollTop" function not working correctly on live site but works on local host?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.