Javascript addEventListener, работающий в Firefox и IE, но не в Chrome?

Это работает в Firefox и Internet Explorer, но не работает в Chrome, я тестировал на нескольких компьютерах с Chrome.Javascript addEventListener, работающий в Firefox и IE, но не в Chrome?

Есть ли что-то, что я пропустил, что заставляет это не работать в Chrome?

<script> 
document.addEventListener('DOMContentLoaded', function() { 
    var dealBar = function() { 
     var scroll = document.documentElement.scrollTop; 
     var sidebarDeals = document.querySelector('#sidebar__deals'); 
     var sidebarAdverts = document.querySelector('#sidebar__adverts'); 
     var adBottom = sidebarAdverts.offsetTop + sidebarAdverts.clientHeight; 

     if (scroll > adBottom) { 
      sidebarDeals.className = "sidebar__deals--fixed"; 
     } else { 
      sidebarDeals.className = "sidebar__deals--relative"; 
     }  
    } 

    window.addEventListener('scroll', function(e){ 
     dealBar(); 
    }); 
    dealBar(); 
}); 
</script>

У меня нет ошибок в Консоли.

источник

2017-02-06 Ash

Определить «не работает». –

В Firefox и Internet Explorer он изменяет имя класса, когда прокрутка больше, чем adBottom, в Chrome он ничего не делает. – Ash

Предоставьте демонстрацию [mcve] – charlietfl

Был не проблема с слушателя событий.

Изменение

var scroll = document.documentElement.scrollTop;

var scroll = (document.documentElement.scrollTop || document.body.scrollTop);

Это делается трюк, кажется Chrome основывает свою позицию прокрутки прочь <body> и Firefox базисов прочь <html>.

Хром возвращал 0 для прокрутки, заставляя функцию не запускать изменение класса.

источник

2017-02-06 14:46:08 Ash

Ваш код вызывает корреляцию, когда я удаляю первую часть, связанную с событием DOMContentLoaded: demo.

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

Попробуйте удалить эту часть:

<script> 
//document.addEventListener('DOMContentLoaded', function() { 
    var dealBar = function() { 
     var scroll = document.documentElement.scrollTop; 
     var sidebarDeals = document.querySelector('#sidebar__deals'); 
     var sidebarAdverts = document.querySelector('#sidebar__adverts'); 
     var adBottom = sidebarAdverts.offsetTop + sidebarAdverts.clientHeight; 

     if (scroll > adBottom) { 
      sidebarDeals.className = "sidebar__deals--fixed"; 
     } else { 
      sidebarDeals.className = "sidebar__deals--relative"; 
     }  
    } 

    window.addEventListener('scroll', function(e){ 
     dealBar(); 
    }); 
    //dealBar(); 
//}); 
</script>

Кроме того, относительно позиции прокрутки, вы можете проверить этот пост: JavaScript get window X/Y position for scroll

источник

2017-02-06 14:15:30

Пробовал это, но не удача. Я добавил консольный журнал (1), и при прокрутке он регистрирует 1, поэтому в остальной части скрипта должно быть что-то еще, что Chrome не нравится. – Ash

@ А вы попробовали отладку javascript? –

Я просто сделал console.log (прокрутка); в функции и в хроме возвращается 0. var scroll = document.documentElement.scrollTop; Проблема в хром, есть ли что-то, что не работает с хромом? – Ash

Javascript addEventListener, работающий в Firefox и IE, но не в Chrome?

ответ

Смежные вопросы