window.pageYOffset ma zawsze wartość 0 z przepełnieniem-x: ukryty

Tworzę stronę internetową, która zawiera trochę treści poza ekranem, które muszą zostać przeniesione w określonym czasie. Aby to osiągnąć, ustawiam overflow-x: hidden na html, body. W ten sposób użytkownik nie może przewinąć w lewo lub w prawo, aby uzyskać dostęp do treści.window.pageYOffset ma zawsze wartość 0 z przepełnieniem-x: ukryty

Jednak w pewnym momencie aplikacji potrzebuję również kwoty, którą użytkownik przewinął jeszcze w dół. O ile wiem, że window.pageYOffset jest jednym z najbardziej niezawodnych sposobów robienia tego.

Jednak po ustawieniu reguły overflow-x. window.pageYOffset jest zawsze równa 0.

Czy te rzeczy nie powinny być ze sobą wzajemnie powiązane? Jak mogę to naprawić?

Testowałem to w Safari, Firefox i Chrome.

Próbowałem już document.documentElement.scrollTop, ale działało to tylko w Firefoksie.

NB:

I nie był w stanie odtworzyć problemu z bardzo prostego przykładu. Moja aplikacja ma również główną zawartość w kontenerze o numerze position: absolute. Jeśli to usuniemy, wszystko działa.

Więc wydaje się być połączeniem overflow-x: hidden na body i postion: absolute na .content wewnątrz ciała.

Nie mogę łatwo pozbyć się bezwzględnego wymogu pozycji, jednak od różnych pojemników .content powinny być w stanie być umieszczone nad sobą.

Edycja 2: Robi się jeszcze dziwniej: mam zestaw transform: translate(0,0) na .content, aby móc później przejść do innej wartości. Jeśli to usuniemy, wszystko działa poprawnie! Jeszcze inna pozornie niezwiązana właściwość, która przeszkadza.

Źródło

2015-01-20 romeovs

Miałem dokładnie ten sam problem i rozwiązałem go po długich poszukiwaniach.

Problem wydaje się pochodzić z overflow-x: hidden wewnątrz ciała. Tak, aby naprawić to dziwne zachowanie użyłem owijkę tak:

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

a następnie przeniosłem atrybut przepełnienie w CSS owijki zamiast pozwolić go w HTML ciała:

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

Mając to mało podstęp, kiedy skanuję moją właściwość srollTop znajdującą się teraz w moim elemencie opakowania, wynik nie jest już wartością zerową, ale rzeczywistą. Bez tego nie działa w Chrome ...

Źródło

2015-05-05 14:58:50 Solofeed

window.pageYOffset ma zawsze wartość 0 z przepełnieniem-x: ukryty

Odpowiedz

Powiązane problemy