Question

我有点陷入一个滚动事件。在我的开发站点（enter link description here）上，滚动正在运行：出现一个返回顶部的按钮，标题颜色更改，右上方的徽标调整大小。生产站点（enter link description here）上的同一用例显示了右上角的滚动到顶部按钮，并且标题颜色发生了变化，但是徽标没有缩小。生产站点是开发站点的副本。该框架基于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;
      }
}

不同的浏览器对两个站点之间的行为没有任何影响。一直盯着调试窗口，但是这对我没有任何帮助，也没有向我显示错误或警告有任何帮助。

为了找到根本原因，我可以/应该采取什么步骤进一步调试站点？

调试以发现在生产和开发站点之间无法运行的onscroll

0 个答案: