O window.innerHeight não funciona no browser Safari.
Quando faço um scroll na página e o elemento chegar em um determinado local da página ele add uma class no HTML, em todos os outros browser esse código funciona. Porem no Safari não consegui fazer os elemento não recebem a classe especificado dentro do código. Acredito que o problema seja nesse window.innerHeight, preciso de uma ajuda para solucionar esse problema.
(function(){
//Declarando as variáveis
var target = document.querySelectorAll('.border-bottom');
var classAnimacao = 'animacao-border-bottom';
var offset = window.innerHeight * 3/4; //Calculo da tamanho da tela para animação começar
var animes = document.querySelectorAll('[data-anime]');
//Função scrollTop
function scrollTop() {
//Distancia do topo da tela
var documentTop = document.documentElement.scrollTop;
// Alvo (border-bottom)
target.forEach(function(element){
var itemTop = element.offsetTop;
if (documentTop > itemTop - offset) {
element.classList.add(classAnimacao);
} else {
element.classList.remove(classAnimacao);
}
});
animes.forEach(function(element){
var anime = element.offsetTop;
if(documentTop > anime - offset) {
element.classList.add('animation');
} else {
element.classList.remove('animation');
}
});
}
// Adiciona uma vez quando atualizada a página
scrollTop();
// Ativando função no rolar do scroll (rolar da página)
document.addEventListener('scroll', debounce(function(){
scrollTop();
}, 200));
}());
document.documentElement.scrollTop
. Para pegar o scroll no Safari usewindow.pageYOffset
. Então você pode usar os dois:var documentTop = document.documentElement.scrollTop || window.pageYOffset;
que irá funcionar no Safari e demais navegadores.