javascript-如何修复Firefox的窗口滚动事件侦听器？

>我做了一个函数,可以根据窗口滚动位置在导航中添加/删除类. https://kmanadkat.github.io/navonscroll/
>它可以在Chrome桌面和移动设备上运行,但无法在Firefox上运行.令人惊讶的是,我在上述网站上提到的示例正在使用Firefox,但没有在主页上运行.
>我已经做了很多尝试来找出错误,window.onscroll函数没有控制台日志.我想将此插件保留在纯Vanilla Javascript中,但我仍然尝试使用箭头符号来查看它们是否可以修复,但是它们没有用.
>一切都在chrome中运行,只是Firefox无法与window.onscroll相处,
>我什至尝试了window.addEventListener(“ scroll”,function(){});,但在我网站以外的选项卡上也无法正常工作,我能够使用开发人员工具进行onscrollevents.
>这是插件的完整代码：


function hide_on_scroll(obj) {
  // Throw Error if input type is not object or navid is not passed
  if(typeof(obj)!=="object" || obj.nav_id===undefined){
    throw new TypeError("Argument must be an Object,also confirm NavId");
  }

  // Get Function Paramenters
  var nav_id                  = obj.nav_id;
  var nav_offset              = !!obj.nav_offset ? obj.nav_offset : 200;
  var nav_position            = !!obj.nav_position ? obj.nav_position : 'top';
  var hide_onscroll_mobile    = !!obj.hide_onscroll_mobile ? true : false;
  var mobile_width            = !!obj.mobile_width ? obj.mobile_width : 576;
  nav_position = nav_position.toLowerCase();

  // Prepare Navbar
  var navbar = document.getElementById(nav_id);
  if(navbar==undefined){throw new TypeError("Recheck Passed Navigation Id"); }

  var nav_height = navbar.offsetHeight;
  var navClasses = document.createElement('style');
  navClasses.type = 'text/css';
  navClasses.innerHTML = 
  '.nav-scroll-up{-webkit-transform: translateY(-'+78+'px);-ms-transform: translateY(-'+78+'px);transform: translateY(-'+78+'px);}' +
  '.nav-scroll-down{-webkit-transform: translateY('+78+'px);-ms-transform: translateY('+78+'px);transform: translateY('+78+'px);}' +
  '.nav-scroll-fixed-'+ nav_position +'{position: fixed;'+ nav_position +': 0;right: 0;left: 0;z-index: 1000;}' +
  '.nav-scroll-transition{will-change: transform; -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.5,0.25,1);transition: -webkit-transform 0.5s cubic-bezier(0.5,1);-o-transition: transform 0.5s cubic-bezier(0.5,1);transition: transform 0.5s cubic-bezier(0.5,1),-webkit-transform 0.5s cubic-bezier(0.5,1);}';
  document.getElementsByTagName('head')[0].appendChild(navClasses);
  navbar.classList.add('nav-scroll-transition');
  navbar.classList.add('nav-scroll-fixed-' + nav_position);


  // Set Global Variables
  var c=0;
  var currentScrollTop = 0;
  var scrollingClass = (nav_position==='top') ? 'nav-scroll-up' : 'nav-scroll-down';
  var width = Math.max(document.documentElement.clientWidth,window.innerWidth || 0);
  // Get Current Viewport Width
  window.onresize = function(){ width = Math.max(document.documentElement.clientWidth,window.innerWidth || 0);}
  // Call Window OnScroll
  window.onscroll = function() {
    // disable Hide on scroll for mobile
    if(hide_onscroll_mobile==false && width<=mobile_width){
      if(navbar.classList.contains(scrollingClass)){ navbar.classList.remove(scrollingClass); }
    }

    // Hide On Scroll for all screen if (width > mobile_width or mobile_width==true)
    else{
      var a = window.scrollY;
      currentScrollTop = a;
      if (c < currentScrollTop && a > (2*nav_offset)) { 
        navbar.classList.add(scrollingClass); 
      }
      else if (c > currentScrollTop && !(a <= nav_offset)) { 
        navbar.classList.remove(scrollingClass); 
      }
      c = currentScrollTop;
    }
  };
}

>我想如何从html调用它,上面的代码来自文件navonscroll.js

  <script src="navonscroll.js"></script>
  <script>
    hide_on_scroll({
      nav_id: 'myscrolling_nav',hide_onscroll_mobile : true,nav_offset : 10
    });
  </script>

我希望有人可以帮助我直接在git上修复它,并为这种开源类型的插件做出贡献,或者在stackoverflow中进行一些修复也将有所帮助.

最佳答案

这显然是CSS问题,所以这将是一个不完整的答案(这不是我的专长),但是由于以下原因,似乎在Firefox上根本没有触发window.scroll事件：

>滚动行为：平滑；在html元素上,
>高度：100vh；溢出：自动；在身体元素上.

如果您从main.css文件中删除任何这些规则,则JS事件将再次触发.

具有CSS专业知识的人可能会了解正在发生的事情以及调整这些规则的最合适方法是什么,即使在我看来这似乎是Firefox的错误.

原文地址：https://www.jb51.cc/css/530701.html

javascript-如何修复Firefox的窗口滚动事件侦听器？

相关推荐