1

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));
}());
3
  • 2
    Creio que o problema não está no innerHeight. O Safari não reconhece é o código document.documentElement.scrollTop. Para pegar o scroll no Safari use window.pageYOffset. Então você pode usar os dois: var documentTop = document.documentElement.scrollTop || window.pageYOffset; que irá funcionar no Safari e demais navegadores.
    – Sam
    Commented 26/08/2018 às 21:08
  • Muito obrigado! Você não sabe como me ajudou e muito, estava procurando o erro e não achava. Ate achei que era erro no foreach também. Mais consegui resolver vlw. Commented 27/08/2018 às 22:50
  • Blz. Vou postar uma resposta ok.
    – Sam
    Commented 27/08/2018 às 22:52

1 Resposta 1

0

O problema não está no innerHeight, o Safari reconhece essa propriedade.

A propriedade document.documentElement.scrollTop é que não é reconhecida pelo Safari e sempre vai retornar 0.

Para pegar o scroll no Safari use window.pageYOffset. Então você pode usar os dois métodos para ter compatibilidade tanto no Safari quanto em outros navegadores:

var documentTop = document.documentElement.scrollTop || window.pageYOffset;

Com isso, o navegador irá retornar o valor do método compatível. O operador || irá fazer com que retorne o que for válido, o da direita OU o da esquerda.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .