Javascript ошибка: Window.CP не определено на codepen.io - PullRequest
Новая
       55

Javascript ошибка: Window.CP не определено на codepen.io

0 голосов
/ 30 апреля 2020

Я испытываю ошибку JavaScript на ручке на codepen.io.

TypeError: window.CP is undefined

Я попытался найти его и понял, что он подключен к бесконечной л oop защита, но я не могу найти способ решить проблему.

Вот ссылка на перо на 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

1 Ответ

1 голос
/ 30 апреля 2020

CodePen имеет проблему с обычными петлями , но хорошо работает с array методами, такими как: forEach, map или reduce. Chrome вывод на консоль Uncaught TypeError: Cannot read property ‘shouldStopExecution’ of undefined. Чтобы решить эту проблему, мне пришлось заменить loop на forEach . Пример

...