Скрипт прекращает работу после окончания загрузки страницы

Question

'use strict';

function getCoords(elem) {
        let box = elem.getBoundingClientRect().top + pageYOffset;
        return box;
}

let actDotPosicion = 'dot1';
let startActDotPosicion = getCoords(document.getElementById('section1'));

document.getElementById('scroller').onscroll = function () {
        let sectionCoord = getCoords(document.getElementById('section1'));
        if (sectionCoord == startActDotPosicion) {
                let a = document.getElementById('dot1');
                if (a != null) {
                        a.src = 'pic/active-dot.png';
                        let b = document.getElementById('active-dot');
                        b.src = 'pic/dot.png';
                        b.id = actDotPosicion;
                        actDotPosicion = a.id;
                        a.id = 'active-dot';
                };
        } else if (sectionCoord == startActDotPosicion-365) {
                let a = document.getElementById('dot2');
                a.src = 'pic/active-dot.png';
                let b = document.getElementById('active-dot');
                b.src = 'pic/dot.png';
                b.id = actDotPosicion;
                actDotPosicion = a.id;
                a.id = 'active-dot';
        } else if (sectionCoord == startActDotPosicion-365*2) {
                let a = document.getElementById('dot3');
                a.src = 'pic/active-dot.png';
                let b = document.getElementById('active-dot');
                b.src = 'pic/dot.png';
                b.id = actDotPosicion;
                actDotPosicion = a.id;
                a.id = 'active-dot';
        } else if (sectionCoord == startActDotPosicion-365*3) {
                let a = document.getElementById('dot4');
                a.src = 'pic/active-dot.png';
                let b = document.getElementById('active-dot');
                b.src = 'pic/dot.png';
                b.id = actDotPosicion;
                actDotPosicion = a.id;
                a.id = 'active-dot';
        } else if (sectionCoord == startActDotPosicion-365*4) {
                let a = document.getElementById('dot5');
                a.src = 'pic/active-dot.png';
                let b = document.getElementById('active-dot');
                b.src = 'pic/dot.png';
                b.id = actDotPosicion;
                actDotPosicion = a.id;
                a.id = 'active-dot';
        };
}

@font-face {
    font-family: "Gilroy";
    src: url("font/GilroyLight.woff");
    font-weight: normal;
}
@font-face {
    font-family: "Gilroy";
    src: url("font/GilroyBold.woff");
    font-weight: bold;
}
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #FFF2E9;
    font-family: "Gilroy", Verdana, serif;
}
div {
    display: flex;
    height: 100%;
    max-height: 100%;
}
img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
svg {
    width: fit-content;
    height: fit-content;
    position: relative;
    top: 38%;
    right: 12%;
}
button {
    color: #FFFFFF;
    background-color: #E9856F;
    border: 0;
    font-weight: bold;
    text-align: center;
    padding: 20px;
    border-radius: 30px;
    font-size: 12px;
}
input {
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-bottom: 2px solid #E9856F;
    background-color: #FFF2E9;
    outline: none;
    width: 250px;
    font-size: 15px;
}
iframe {
    display: none;
    position: absolute;
    width: 742px;
    height: 472px;
    margin-top: -142px;
    margin-left: -328px;
}
label {
    width: 100px;
    height: 100px;
    overflow: hidden;
    z-index: 2;
    margin: auto;
}
h1 {
    font-weight: bold;
    line-height: 1.159;
    font-size: 26px;
    margin: 0;
}
h2 {
    font-size: 24px;
    border-bottom-style: solid;
    margin-left: 20%;
    margin-bottom: 0;
    margin-top: 120px;
    padding-bottom: 12px;
    height: fit-content;
}
h3 {
    font-size: 24px;
    margin-bottom: 10px;
}
h4 {
    font-size: 23px;
    margin-top: 70px;
    margin-bottom: 0;
}
text {
    font-weight: bold;
    font-size: 13px;
}
p {
    font-size: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
}
footer {
    display: flex;
    margin-left: 20%;
    margin-right: 20%;
    padding-bottom: 3%;
    padding-top: 3%;
    justify-content: space-between;
    align-items: flex-end;
}
footer p, 
footer a {
    font-size: 14px;
    color: #D7AD97;
}
form p, 
form a {
    color: #E9856F;
    font-size: 8px;
}
.main {
    display: grid;
    grid-template-rows: repeat(6, 937px) 293px;
}
.w100 {
    width: 100%;
}
.column {
    flex-direction: column;
}
.header {
    flex-direction: column;
    justify-content: flex-end;
}
.logo {
    width: 60%;
    padding: 27% 0 0 35%;
    align-self: flex-start;
}
.right39 {
    flex: 39;
    justify-content: flex-end;
}
.right54 {
    flex: 54.5;
}
.mid41 {
    flex: 41;
}
.left20 {
    flex: 20;
}
.left45 {
    flex: 45.5;
    justify-content: flex-start;
}
.right75 {
    flex: 75;
}
.dark {
    background-color: #F3DDCF;
}
.ml20 {
    margin-left: 20%;
    margin-top: 0;
}
.ml70 {
    margin-left: 70px;
}
.mt15 {
    margin-top: 30px;
    margin-bottom: 0;
}
.fit {
    width: auto;
    height: auto;
}
.video {
    display: grid;
    width: 1127px;
}
.table {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: minmax(auto, 270px) minmax(auto, 270px);
    margin-top: 80px;
}
.table img {
    width: 92px;
}
.table p,
.table2 p {
    margin: 0;
    padding: 0;
}
.table2 {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: minmax(auto, 270px) minmax(auto, 270px);
    margin-top: 80px;
}
.table2 img {
    width: 50px;
}
#dots {
    flex-direction: column;
    flex: 25;
    align-items: flex-end;
    justify-content: center;
}
#dots img {
    width: 25px;
    margin-top: 20px;
    margin-bottom: 20px;
}
#active-dot {
    width: 35px;
    margin-left: -5px;
}
.mac {
    margin-top: 70px;
    margin-left: -12%;
    max-height: 570px;
    align-self: start;
    grid-column: 1;
    grid-row: 1;
}
#scroller {
    height: 818px;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    margin-left: 4.5%;
}
#scroller::-webkit-scrollbar { 
    width: 0;
}
.section {
    scroll-snap-align: center;
    margin-top: 35px;
}
.section:first-of-type {
    margin-top: 200px;
}
.section:last-of-type {
    margin-bottom: 200px;
}
.vk {
    font-size: 9px;
    font-weight: bold;
    color: #D3A58D;
}
.feedback {
    justify-content: center;
    margin-left: 6%;
}
.fbsection {
    margin-left: -4%;
    margin-bottom: 100px;
    overflow: hidden;
}
.circle {
    display: grid;
    width: 330px;
}
.fbphoto {
    width: 196px;
    grid-column: 1;
    grid-row: 1;
    margin: auto;
}
.mask {
    z-index: 1;
    width: 409px;
    grid-column: 1;
    grid-row: 1;
    margin: auto;
}
.h4-sub {
    color: #D3A58D;
    font-weight: bold;
    font-size: 14px;
}
.achievements {
    margin-top: 100px;
}
.achievements p {
    font-size: 15px;
    margin: 0;
    padding-top: 15px;
}
.top-gradient {
    position: absolute;
    width: 104%;
    height: 175px;
    z-index: 2;
    background: -webkit-linear-gradient(
        top, #F3DDCF 5%, rgba(0,0,0,0) 100%
    );
}
.bot-gradient {
    align-self: flex-end;
    position: absolute;
    width: 104%;
    height: 175px;
    z-index: 2;
    background: -webkit-linear-gradient(
        top, rgba(0,0,0,0) 5%, #F3DDCF 100%
    );
}
#BtnControl {
    display: none;
}
#BtnControl:checked + label > iframe {
    display: block;
}
.BtnCircle {
    width: 105px;
    height: 105px;
    border-radius: 50%;
    grid-column: 1;
    grid-row: 1;
    z-index: 1;
    margin-top: 227px;
    margin-left: 382px;
    box-sizing: border-box;
}
.BtnCircle:hover {
    background: rgba(0,0,30,0.3);
}
.field1 {
    position: absolute;
    margin-top: 496px;
    margin-left: 30px;
    width: 153px;
    z-index: 10;
}
.field2 {
    position: absolute;
    margin-top: 1030px;
    margin-left: 94.5%;
    width: 55px;
    z-index: 10;
}
.field3 {
    position: absolute;
    margin-top: 1740px;
    margin-left: -18px;
    width: 153px;
    z-index: 10;
}
.field4 {
    position: absolute;
    margin-top: 2675px;
    margin-left: 90%;
    width: 153px;
    z-index: 10;
}
.field5 {
    position: absolute;
    margin-top: 3465px;
    margin-left: 30px;
    width: 200px;
    z-index: 10;
}
.field6 {
    position: absolute;
    margin-top: 4400px;
    margin-left: 93%;
    width: 105px;
    z-index: 10;
}

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="author" content="Владимир Воронин">
  <meta name="description" content="Бесплатный вебинар Татьяны Маричевой по запуску своего онлайн-курса">
  <meta name="robot" content="none">
  <title>Вебинар "Пошаговый план по запуску своего онлайн-курса"</title>
  <link rel="stylesheet" href="style.css">
</head>
<script type="text/javascript">
  alert ('Эта страница является тренировочной!\nСодержащийся в ней контент не имеет отношения к действительности!\n\nThis page is just for practice!\nThe content it contains is irrelevant!');
</script>
<body>
  <img src="pic/field.png" class="field1">
  <img src="pic/field2.png" class="field2">
  <img src="pic/field.png" class="field3">
  <img src="pic/field.png" class="field4">
  <img src="pic/field5.png" class="field5">
  <img src="pic/field6.png" class="field6">
  <div class="main">
    <div class="w100">
      <div class="left20">
        <img src="pic/Logo.png" class="logo">
      </div>
      <div class="column mid41">
        <div class="header">
          <svg>
            <text transform="rotate(-90)" text-anchor="end" dominant-baseline="hanging">26 МАЯ 15:00</text>
            <rect width="3" height="60" x="3.5" y="95"/>
          </svg>
          <p>БЕСПЛАТНЫЙ ВЕБИНАР ТАТЬЯНЫ МАРИЧЕВОЙ</p>
          <h1>ПОШАГОВЫЙ ПЛАН<br>
            ПО ЗАПУСКУ<br>
            СВОЕГО ОНЛАЙН-КУРСА
          </h1>
          <p>ЗАПУСТИ ОНЛАЙН-КУРС И ВЫЙДИ НА ДОХОД ОТ 300 000 РУБЛЕЙ</p>
        </div>
        <div class="form">
          <form>
            <br><br><br>
            <input type="email" id="email" name="email" required placeholder="E-MAIL" multiple="0"><br>
            <input type="tel" id="tel" name="tel" placeholder="ТЕЛЕФОН">
            <br><br><br><br>
            <button>ЗАПИСАТЬСЯ НА ВЕБИНАР</button>
            <br><br>
            <p>НАЖИМАЯ НА КНОПКУ, ВЫ ВЫРАЖАЕТЕ СВОЕ СОГЛАСИЕ<br>С <a href="http://site.ru/privacy">НАШЕЙ ПОЛИТИКОЙ КОНФИДЕНЦИАЛЬНОСТИ</a></p>
          </form>
        </div>
      </div>
      <div class="right39">
        <img src="pic/photo1.jpg">
      </div>
    </div>
    <div class="column dark">
      <div class="fit ml70">
        <h2>ПОСМОТРИТЕ КОРОТКОЕ ВИДЕО</h2>
      </div>
      <div class="fit ml70">
        <p class="ml20 mt15">УЗНАЙТЕ ЗА 1,5 МИНУТЫ, ЧТО БУДЕТ НА ВЕБИНАРЕ</p>
      </div>
      <div class="video ml20">
        <img src="pic/mac.png" class="mac"/>
        <div class="BtnCircle">
          <input type="checkbox" id="BtnControl"/>
          <label class="btn" for="BtnControl">
            <iframe src="https://www.youtube.com/embed/US4TOfssNJA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
          </label>
        </div>
      </div>
    </div>
    <div class="column">
      <div class="fit">
        <h2>ЧТО БУДЕТ НА ВЕБИНАРЕ?</h2>
      </div>
      <div class="table ml20">
        <div class="column">
          <img src="pic/business.png">
          <h3>ПЛАН ЗАПУСКА</h3>
          <p>
            КАКИЕ ШАГИ НУЖНО<br>
            СДЕЛАТЬ, ЧТОБЫ<br>
            ЗАПУСТИТЬ СВОЮ<br>
            ОНЛАЙН-ШКОЛУ?
          </p>
        </div>
        <div class="column">
          <img src="pic/startup.png">
          <h3>БЫСТРЫЙ СТАРТ</h3>
          <p>
            КАК ЗА НЕСКОЛЬКО ДНЕЙ<br>
            ПРОТЕСТИРОВАТЬ НИШУ?
          </p>
        </div>
        <div class="column">
          <img src="pic/partnership.png">
          <h3>ВЕБИНАР</h3>
          <p>
            КАК СОБРАТЬ<br>
            ЛЮДЕЙ И ПРОДАТЬ<br>
            СВОЙ ПРОДУКТ<br>
            НА ВЕБИНАРЕ?
          </p>
        </div>
        <div class="column">
          <img src="pic/strategy.png">
          <h3>ОШИБКИ</h3>
          <p>
            КАК ИЗБЕЖАТЬ ТИПИЧНЫХ<br>
            ОШИБОК НА СТАРТЕ<br>
            ПРОЕКТА?
          </p>
        </div>
        <div class="column">
          <img src="pic/profit.png">
          <h3>ВЛОЖЕНИЯ</h3>
          <p>
            КОГДА И СКОЛЬКО ВКЛАДЫВАТЬ<br>
            ДЕНЕГ И КАК УЛОЖИТЬСЯ<br>
            В МИНИМАЛЬНЫЙ БЮДЖЕТ?
          </p>
        </div>
        <div class="column">
          <img src="pic/pc.png">
          <h3>СЕРВИСЫ</h3>
          <p>
            КАКИМИ СЕРВИСАМИ<br>
            ДЛЯ АВТОМАТИЗАЦИИ<br>
            МЫ ПОЛЬЗУЕМСЯ?
          </p>
        </div>
      </div>
    </div>
    <div class="dark">
      <div class="left45">
        <img src="pic/photo2.jpg">
      </div>
      <div class="column right54">
        <div class="fit">
          <h2>КТО ВЕДЕТ?</h2>
        </div>
        <div class="column ml20">
          <h4>ТАТЬЯНА МАРИЧЕВА</h4>
          <p class="h4-sub">ПРОДЮСЕР<br>МАРКЕТОЛОГ</p>
          <div class="achievements column">
            <p>5 ЛЕТ В СФЕРЕ ОНЛАЙН-ОБРАЗОВАНИЯ</p>
            <p>3 ГОДА СПИКЕР БИЗНЕС МОЛОДОСТИ</p>
            <p>6 ЗАПУСКОВ ОНЛАЙН-ШКОЛ</p>
            <p>24 МИЛЛИОНА РУБЛЕЙ ВЫРУЧКИ<br>ЗА ПОСЛЕДНИЕ 6 МЕСЯЦЕВ</p>
            <p>60 ТЫСЯЧ ЧЕЛОВЕК ПОСЕТИЛИ ВЕБИНАРЫ</p>
          </div>
        </div>
      </div>
    </div>
    <div class="column">
      <div class="fit">
        <h2>КОМУ БУДЕТ ПОЛЕЗЕН ВЕБИНАР?</h2>
      </div>
      <div class="table2 ml20">
        <div class="column">
          <img src="pic/boy_1.png">
          <h3>ДЛЯ ПРОДЮСЕРОВ</h3>
          <p>КОТОРЫЕ УЖЕ НАШЛИ ЭКСПЕРТА, НО ПОКА<br>ТАК И НЕ СМОГЛА ЗАПУСТИТЬСЯ</p>
        </div>
        <div class="column">
          <img src="pic/old_man.png">
          <h3>ДЛЯ ЭКСПЕРТОВ</h3>
          <p>КОТОРЫЕ ХОТЯТ ПРОДЮСИРОВАТЬ<br>СЕБЯ САМИ И УВЕРЕНЫ, ЧТО ЛУЧШЕ<br>НИХ НЕ СДЕЛАЕТ НИКТО</p>
        </div>
        <div class="column">
          <img src="pic/boy.png">
          <h3>ДЛЯ НОВИЧКОВ</h3>
          <p>КОТОРЫЕ ХОТЯТ ПОЛУЧИТЬ ПРИБЫЛЬНУЮ<br>ОНЛАЙН-ПРОФЕССИЮ И ВЫЙТИ НА<br>СТАБИЛЬНЫЙ ДОХОД ОТ 100.000 РУБЛЕЙ</p>
        </div>
        <div class="column">
          <img src="pic/man.png">
          <h3>ДЛЯ ПРЕДПРИНИМАТЕЛЕЙ</h3>
          <p>КОТОРЫЕ ХОТЯТ ЗАПУСТИТЬ ДОПОЛНИТЕЛЬНОЕ<br>ВЫСОКОМАРЖИНАЛЬНОЕ НАПРАВЛЕНИЕ БИЗНЕСА</p>
        </div>
      </div>
    </div>
    <div class="dark column">
      <div class="fit">
        <h2>ПОСМОТРИТЕ ОТЗЫВЫ УЧАСТНИКОВ ВЕБИНАРА</h2>
      </div>
      <div class="fbsection">
        <div id="dots">
          <img src="pic/active-dot.png" id="active-dot">
          <img src="pic/dot.png" id="dot2">
          <img src="pic/dot.png" id="dot3">
          <img src="pic/dot.png" id="dot4">
          <img src="pic/dot.png" id="dot5">
        </div>
        <div class="top-gradient">
        </div>
        <div class="bot-gradient">
        </div>
        <div class="top-gradient">
        </div>
        <div class="bot-gradient">
        </div>
        <div class="column right75" id="scroller">
          <div class="section" id="section1">
            <div class="circle">
              <img src="pic/feed1.jpg" class="fbphoto">
              <img src="pic/holed_circle.png" class="mask">
            </div>
            <div class="column feedback">
              <h3>1 ДАРЬЯ ПОЛЯКОВА</h3>
              <p class="vk">vk.com|daria_polyakova</p>
              <p>
                СПАСИБО ЗА ВЕБИНАРЫ И ТАКУЮ ГОРУ ИНФОРМАЦИИ,<br>
                МОТИВАЦИИ И ТАКОГО ПОЗИТИВНОГО ЛУЧА. МНЕ ЭТО<br>
                ОЧЕНЬ ПОМОГЛО ОПРЕДЕЛИТЬСЯ С ТЕМ, ЧТО Я БЫ<br>
                ХОТЕЛА ИМЕННО ПРОДЮСИРОВАТЬ БУДУЩУЮ ШКОЛУ,<br>
                А НЕ ВЫСТУПАТЬ ЭКСПЕРТОМ. ВРЕЗАЛАСЬ В ПАМЯТЬ<br>
                ФРАЗА О ТОМ, ЧТО ЕСЛИ НЕ НАЧАТЬ СЕГОДНЯ, ТО<br>
                ПОЕЗД ПОД НАЗВАНИЕМ “СЛЕДУЮЩИЙ РАЗ”<br>
                ОТПРАВИТСЯ НА СТАНЦИЮ “НИКОГДА”.
              </p>
            </div>
          </div>
          <div class="section">
            <div class="circle">
              <img src="pic/feed1.jpg" class="fbphoto">
              <img src="pic/holed_circle.png" class="mask">
            </div>
            <div class="column feedback">
              <h3>2 ДАРЬЯ ПОЛЯКОВА</h3>
              <p class="vk">vk.com|daria_polyakova</p>
              <p>
                СПАСИБО ЗА ВЕБИНАРЫ И ТАКУЮ ГОРУ ИНФОРМАЦИИ,<br>
                МОТИВАЦИИ И ТАКОГО ПОЗИТИВНОГО ЛУЧА. МНЕ ЭТО<br>
                ОЧЕНЬ ПОМОГЛО ОПРЕДЕЛИТЬСЯ С ТЕМ, ЧТО Я БЫ<br>
                ХОТЕЛА ИМЕННО ПРОДЮСИРОВАТЬ БУДУЩУЮ ШКОЛУ,<br>
                А НЕ ВЫСТУПАТЬ ЭКСПЕРТОМ. ВРЕЗАЛАСЬ В ПАМЯТЬ<br>
                ФРАЗА О ТОМ, ЧТО ЕСЛИ НЕ НАЧАТЬ СЕГОДНЯ, ТО<br>
                ПОЕЗД ПОД НАЗВАНИЕМ “СЛЕДУЮЩИЙ РАЗ”<br>
                ОТПРАВИТСЯ НА СТАНЦИЮ “НИКОГДА”.
              </p>
            </div>
          </div>
          <div class="section">
            <div class="circle">
              <img src="pic/feed1.jpg" class="fbphoto">
              <img src="pic/holed_circle.png" class="mask">
            </div>
            <div class="column feedback">
              <h3>3 ДАРЬЯ ПОЛЯКОВА</h3>
              <p class="vk">vk.com|daria_polyakova</p>
              <p>
                СПАСИБО ЗА ВЕБИНАРЫ И ТАКУЮ ГОРУ ИНФОРМАЦИИ,<br>
                МОТИВАЦИИ И ТАКОГО ПОЗИТИВНОГО ЛУЧА. МНЕ ЭТО<br>
                ОЧЕНЬ ПОМОГЛО ОПРЕДЕЛИТЬСЯ С ТЕМ, ЧТО Я БЫ<br>
                ХОТЕЛА ИМЕННО ПРОДЮСИРОВАТЬ БУДУЩУЮ ШКОЛУ,<br>
                А НЕ ВЫСТУПАТЬ ЭКСПЕРТОМ. ВРЕЗАЛАСЬ В ПАМЯТЬ<br>
                ФРАЗА О ТОМ, ЧТО ЕСЛИ НЕ НАЧАТЬ СЕГОДНЯ, ТО<br>
                ПОЕЗД ПОД НАЗВАНИЕМ “СЛЕДУЮЩИЙ РАЗ”<br>
                ОТПРАВИТСЯ НА СТАНЦИЮ “НИКОГДА”.
              </p>
            </div>
          </div>
          <div class="section">
            <div class="circle">
              <img src="pic/feed1.jpg" class="fbphoto">
              <img src="pic/holed_circle.png" class="mask">
            </div>
            <div class="column feedback">
              <h3>4 ДАРЬЯ ПОЛЯКОВА</h3>
              <p class="vk">vk.com|daria_polyakova</p>
              <p>
                СПАСИБО ЗА ВЕБИНАРЫ И ТАКУЮ ГОРУ ИНФОРМАЦИИ,<br>
                МОТИВАЦИИ И ТАКОГО ПОЗИТИВНОГО ЛУЧА. МНЕ ЭТО<br>
                ОЧЕНЬ ПОМОГЛО ОПРЕДЕЛИТЬСЯ С ТЕМ, ЧТО Я БЫ<br>
                ХОТЕЛА ИМЕННО ПРОДЮСИРОВАТЬ БУДУЩУЮ ШКОЛУ,<br>
                А НЕ ВЫСТУПАТЬ ЭКСПЕРТОМ. ВРЕЗАЛАСЬ В ПАМЯТЬ<br>
                ФРАЗА О ТОМ, ЧТО ЕСЛИ НЕ НАЧАТЬ СЕГОДНЯ, ТО<br>
                ПОЕЗД ПОД НАЗВАНИЕМ “СЛЕДУЮЩИЙ РАЗ”<br>
                ОТПРАВИТСЯ НА СТАНЦИЮ “НИКОГДА”.
              </p>
            </div>
          </div>
          <div class="section">
            <div class="circle">
              <img src="pic/feed1.jpg" class="fbphoto">
              <img src="pic/holed_circle.png" class="mask">
            </div>
            <div class="column feedback">
              <h3>5 ДАРЬЯ ПОЛЯКОВА</h3>
              <p class="vk">vk.com|daria_polyakova</p>
              <p>
                СПАСИБО ЗА ВЕБИНАРЫ И ТАКУЮ ГОРУ ИНФОРМАЦИИ,<br>
                МОТИВАЦИИ И ТАКОГО ПОЗИТИВНОГО ЛУЧА. МНЕ ЭТО<br>
                ОЧЕНЬ ПОМОГЛО ОПРЕДЕЛИТЬСЯ С ТЕМ, ЧТО Я БЫ<br>
                ХОТЕЛА ИМЕННО ПРОДЮСИРОВАТЬ БУДУЩУЮ ШКОЛУ,<br>
                А НЕ ВЫСТУПАТЬ ЭКСПЕРТОМ. ВРЕЗАЛАСЬ В ПАМЯТЬ<br>
                ФРАЗА О ТОМ, ЧТО ЕСЛИ НЕ НАЧАТЬ СЕГОДНЯ, ТО<br>
                ПОЕЗД ПОД НАЗВАНИЕМ “СЛЕДУЮЩИЙ РАЗ”<br>
                ОТПРАВИТСЯ НА СТАНЦИЮ “НИКОГДА”.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer>
      <p>
        ИП МАРИЧЕВА ТАТЬЯНА ВЛАДИМИРОВНА<br>
        ИНН: 771472052449 / ОГРНИП: 316774600227996<br>
        БАНК: АО "АЛЬФА-БАНК"<br>
        НОМЕР СЧЁТА: 40802810602880000918<br>
        БИК: 044525593 / К/С: 30101810200000000593<br>
        ПОЧТОВЫЙ АДРЕС: УЛ. РУСТАВЕЛИ, Д.8Б, КВ.1 Г.МОСКВА<br>
        <br><br><br>
        2019 ВСЕ ПРАВА ЗАЩИЩЕНЫ
      </p>
      <p>
        <a href="http://site.ru/privacy">ПОЛИТИКА КОНФИДЕНЦИАЛЬНОСТИ</a><br>
        <a href="http://site.ru/offer">ДОГОВОР-ОФЕРТА</a>
      </p>
    </footer>
  </div>
</body>
<script src="script.js"></script>
</html>

Имеется тренировочный сайт https://first-lending-l30p0h.netlify.app Там в наличии единственный простенький скрипт, который должен обеспечивать изменение положения активного кружка в зависимости от показываемого в данный момент пункта прокрутки. Локально это прекрасно работает. На хостинге это стабильно работает только на моем пк, а у других или вообще никак, или только пока страница грузится. Вопрос. Что мешает скрипту работать: кривизна моего метода реализации или что-то менее очевидное?

Answer 1

Оказалось, что координаты на некоторых устройствах - это числа с очень длинным дробным хвостом. При отбрасывании его через Math.trunc всё работает отлично.

'use strict'

function getCoords(elem) {
        let box = elem.getBoundingClientRect().top + pageYOffset;
        return Math.trunc(box);
}

function dotMove() {
        let a = document.getElementById(n);
        if (a != null) {
            a.src = 'pic/active-dot.png';
            let b = document.getElementById('active-dot');
            b.src = 'pic/dot.png';
            b.id = actDotPosicion;
            actDotPosicion = a.id;
            a.id = 'active-dot';
        };
}

let actDotPosicion = 'dot1';
let sectionList = document.querySelectorAll('div.section');
let startActDotPosicion = getCoords(sectionList[0]);
let sectionMove = getCoords(sectionList[1])-startActDotPosicion;
let n;

document.getElementById('scroller').onscroll = function () {
        let sectionCoord = getCoords(sectionList[0]);
        if (sectionCoord == startActDotPosicion) {
                n = 'dot1'
        } else if (sectionCoord == startActDotPosicion-sectionMove) {
                n = 'dot2'
        } else if (sectionCoord == startActDotPosicion-sectionMove*2) {
                n = 'dot3'
        } else if (sectionCoord == startActDotPosicion-sectionMove*3) {
                n = 'dot4'
        } else if (sectionCoord == startActDotPosicion-sectionMove*4) {
                n = 'dot5'
        };
        dotMove();
};

БЛОГ НА HUSL

Скрипт прекращает работу после окончания загрузки страницы

Ответы (1 шт):