Javascript - window.innerheight - Browser Safari

Asked

Viewed 55 times

1

Window.innerheight does not work in Safari browser.

When I scroll on the page and the element arrives at a particular page location it adds a class in HTML, in all other browser that code works. However in Safari I was unable to make the elements do not receive the class specified within the code. I believe the problem is in this window.innerheight, I need a help to solve this problem.

(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));
}());
javascript html jquery
  • 2

    I believe that the problem is not in innerheight. Safari does not recognize the code document.documentElement.scrollTop. To get the scroll in Safari use window.pageYOffset. So you can use both: var documentTop = document.documentElement.scrollTop || window.pageYOffset; that will work in Safari and other browsers.

  • Thank you very much! You do not know how helped me and a lot, I was looking for the error and did not think. I even thought it was a mistake in foreach too. But I managed to solve vlw.

  • Blz. I’ll post an ok reply.

1 answer

0


The problem is not in the innerHeight, Safari recognizes this property.

The estate document.documentElement.scrollTop is that it is not recognized by Safari and will always return 0.

To get the scroll in Safari use window.pageYOffset. Then you can use both methods to get compatibility in both Safari and other browsers:

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

With this, the browser will return the value of the compatible method. The operator || will return what is valid, the one on the right or the one on the left.

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.