window.pageYOffset è sempre 0 con overflow-x: nascosto

Sto creando una pagina Web con alcuni contenuti fuori schermo che devono essere inseriti solo in momenti specifici. Per raggiungere questo obiettivo sto impostando overflow-x: hidden su html, body. In questo modo l'utente non può scorrere verso sinistra o destra per ottenere il contenuto.window.pageYOffset è sempre 0 con overflow-x: nascosto

Tuttavia, ad un certo punto nell'applicazione ho anche bisogno della quantità che l'utente ha già fatto scorrere verso il basso. Per quanto ne so, lo window.pageYOffset è uno dei modi più affidabili per farlo.

Tuttavia, quando ho impostato la regola overflow-x. window.pageYOffset è sempre uguale a 0.

Queste cose non dovrebbero essere piuttosto scollegate l'una dall'altra? Come posso risolvere questo?

L'ho provato su Safari, Firefox e Chrome.

Ho provato document.documentElement.scrollTop ma questo ha funzionato solo su Firefox.

NB:

non ero in grado di riprodurre il problema con un esempio molto semplice. La mia app ha anche il contenuto principale in un contenitore con position: absolute. Se rimuovo questo, tutto funziona.

Quindi sembra essere la combinazione di overflow-x: hidden su body e postion: absolute sul .content all'interno del corpo.

Non riesco facilmente a eliminare il requisito assoluto di posizione, dal momento che diversi contenitori .content devono poter essere posizionati uno sopra l'altro.

Modifica 2: Diventa ancora più strano: ho un transform: translate(0,0) impostato su .content per poter passare a qualche altro valore in seguito. Se rimuovo questo, tutto funziona bene! Ancora un'altra proprietà apparentemente non correlata css che interferisce.

fonte

2015-01-20 romeovs

Ho avuto lo stesso identico problema e l'ho risolto dopo una lunga ricerca.

Il problema sembra venire da overflow-x: hidden all'interno del corpo. Quindi, per risolvere questo strano comportamento ho usato un wrapper come questo:

<body> 
    <div class="myWrapper"> 
     All your content here 
    </div> 
</body>

e poi mi sono trasferito l'attributo di overflow nel CSS del involucro invece di lasciare che in html, body:

html, body { 
    margin:0; 
    padding:0; 
    height: 100%; 
} 
.wrapper { 
    height: 100%; 
    overflow-x: hidden; 
}

Con questo piccolo trucco quando scrivo il mio srollTop propertie ora si trova nel mio elemento wrapper, il risultato non è più 0 ma il valore reale. Senza che ciò non funzioni su Chrome ...

fonte

2015-05-05 14:58:50 Solofeed

window.pageYOffset è sempre 0 con overflow-x: nascosto

risposta

Problemi correlati