Отладка, чтобы найти, что onscroll не работает между производством и разработкой сайта - PullRequest
0 голосов
/ 22 января 2019

Я застрял на событии onscroll.На моем сайте разработки ( введите описание ссылки здесь ) работает прокрутка: появляется кнопка для возврата в начало, цвет заголовка изменяется, а логотип в правом верхнем углу изменяется.В том же сценарии использования на производственном сайте ( введите описание ссылки здесь ) показана кнопка прокрутки вверх в правом углу, и цвет заголовка изменяется, однако логотип не уменьшается.Сайт производства является копией сайта разработки.Фреймворк основан на Bootstrap 4.3.1

Поведение прокрутки выполняется с помощью javascript dyscrollup.js.Фрагмент, показывающий поведение прокрутки:

onscroll: function () {
    var self = this, btn = document.getElementById(self.btnID);
    var Logo = document.getElementById("header_logo"); // logo
    window.onscroll = function () {
        if (document.body.scrollTop > self.option.showafter || document.documentElement.scrollTop > self.option.showafter) {
            // Show the button if not yet visible
            if (btn.style.display === 'none') {
                self.fadeIn(btn);
            }
            Logo.className = 'smallLogo'; // resize logo 2 small 
            // If page is not scrolling back to the top after clicking
            // the dyscrollup-btn then remove the click lock
            if (!btn.classList.contains('dyscrollup-btn-scrolling')) {
                btn.classList.remove('click-locked');
            }
        }
        else {
            // Hide the button when approaching the top
            if (btn.style.display !== 'none') {
                self.fadeOut(btn);
            }
            // Remove the click lock
            btn.classList.remove('click-locked');
            Logo.className = 'largeLogo'; // resize logo 2 large
        }
    };
},

Фрагмент CSS для изменения размера логотипа:

@media only screen and (min-width: 320px) {
  /* For mobile phones: */
  #header_logo {
    transition: all .5s;
    }
      .largeLogo { 
        width: 130px;
        max-height: 8vh;
      }
      .smallLogo  {
          width: 6.125rem;
          height: 4vh;
      }
}
@media only screen and (min-width: 720px) {
  /* For larger phones and screens: */
  #header_logo {
    transition: all .5s;
    }
      .largeLogo {
        width: 260px;
        max-height: 18vh;
      }
      .smallLogo  {
          width: 12.125rem;
          height: 6vh;
      }
}

Различный браузер не делает различий в поведении между двумя сайтами.Я смотрел в окно отладки, но это не помогло мне больше, оно не показало мне ошибку или предупреждение, которое могло бы помочь.

Какие шаги можно / нужно предпринять для дальнейшей отладкисайт, чтобы найти первопричину?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...