Javascript 错误：Window.CP 在 codepen.io 上未定义

Question

我在 codepen.io 上的笔上遇到 JavaScript 错误。

TypeError: window.CP is undefined

我试图查找它并了解它与无限循环保护有关，但我找不到解决问题的方法。

这是CodePen上的笔（它不起作用）和JSFiddle （它起作用）的链接。

这是片段上的代码（它也可以工作）。

（滚动时绿色块应该会改变颜色）

 <script> function scrollFunction() { var content = document.getElementById('content').querySelectorAll('p') var contentY = [] for (i = 0; i < content.length; i++) { contentY[i] = content[i].offsetTop } var html = document.documentElement var y = html.scrollTop var windowY = window.innerHeight var phone = document.getElementById('phone') for (i = 0; i < content.length; i++) { if (y > contentY[i] - windowY * 0.4) { phone.classList.add('color' + (i + 1)) phone.classList.remove('color' + i) } else { phone.classList.remove('color' + (i + 1)) } } } window.onscroll = function () { scrollFunction() } </script>

 body { background: white; color: #323232; font-weight: 300; height: 100vh; margin: 0; font-family: Helvetica neue, roboto; } nav { position: fixed; top: 0; left: 0; width: 100%; background: white; -webkit-box-shadow: 0px -6px 25px 20px rgba(0, 0, 0, 0.44); -moz-box-shadow: 0px -6px 25px 20px rgba(0, 0, 0, 0.44); box-shadow: 0px -6px 25px 20px rgba(0, 0, 0, 0.44); } nav ul { list-style: none; display: flex; flex-wrap: wrap; } nav ul li { padding: 0 1rem; } main { display: flex; flex-wrap: wrap; justify-content: space-evenly; } #content { width: 50%; } /* The first paragraph has a margin-top = the size of the screen*/ #content p:first-child { margin-top: 100vh; } #content p { margin: 0; margin-bottom: 100vh; } /* Same margin-top as the 1st paragraph + sticky at 40% from the top*/ #phone { margin-top: 100vh; width: 8rem; height: 13rem; max-height: 70vh; position: sticky; top: 40%; background: lightgreen; transition: background 0.2s; } #phone.color1 { background: palevioletred; } #phone.color2 { background: purple; } #phone.color3 { background: royalblue; } #phone.color4 { background: rgb(30, 150, 104); }

 <nav class="menu"> <ul> <li>Menu</li> <li>Bar</li> <li>Scrolling</li> <li>Effect</li> </ul> </nav> <main> <div id="content" class="content"> <p> One advanced diverted domestic sex repeated bringing you old. Possible procured her trifling laughter thoughts property she met way. </p> <p> Finished her are its honoured drawings nor. Pretty see mutual thrown all not edward ten. Particular an boisterous up he reasonably frequently. </p> <p> May musical arrival beloved luckily adapted him. Shyness mention married son she his started now. Rose if as past near were. To graceful he elegance oh moderate attended entrance pleasur </p> <p> Out believe has request not how comfort evident. Up delight cousins we feeling minutes. </p> </div> <div id="phone"> </div> </main

Answer 1

CodePen 的正常循环有问题，但可以很好地使用Array方法，例如： forEach 、 map或reduce 。 Chrome 控制台 output：

Uncaught TypeError: Cannot read property ‘shouldStopExecution’ of undefined

为了解决它，我不得不用forEach更改正常循环。 例子