Как исправить прослушиватель событий прокрутки окна для Firefox? - PullRequest
Новая
       27

Как исправить прослушиватель событий прокрутки окна для Firefox?

3 голосов
/ 23 марта 2019

  • Я сделал функцию, которая добавляет / удаляет классы для навигации в зависимости от положения прокрутки окна. https://kmanadkat.github.io/navonscroll/

  • Он работает в Chrome Desktop и Mobile, но * 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, 0.25, 1);transition: -webkit-transform 0.5s cubic-bezier(0.5, 0, 0.25, 1);-o-transition: transform 0.5s cubic-bezier(0.5, 0, 0.25, 1);transition: transform 0.5s cubic-bezier(0.5, 0, 0.25, 1);transition: transform 0.5s cubic-bezier(0.5, 0, 0.25, 1), -webkit-transform 0.5s cubic-bezier(0.5, 0, 0.25, 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 также поможет.

1 Ответ

2 голосов
/ 23 марта 2019

По-видимому, это проблема CSS, так что это будет неполный ответ (на самом деле это не моя область), но кажется, что событие window.scroll вообще не запускается в Firefox из-за комбинации:

  • scroll-behavior: smooth; на элементе html,
  • height: 100vh; + overflow: auto; на элементе body.

Если вы удалите какое-либо из этих правил из файла main.css, событие JS снова сработает.

Кто-то, обладающий большим опытом работы с CSS, может понять, что происходит и как лучше всего приспособить эти правила, даже если мне это кажется ошибкой в ​​Firefox.

...