Chcę, aby moja strona była przewijana tylko w pionie. Więc ustawiłemoverflow-x:hidden; do mojego.page-wrapper. Mój.page-wrapper przechowuje dwie bezwzględnie ułożone warstwy jedna na drugiej. Po kliknięciu przycisku górna warstwa przesuwa się na bok (jak wspomnianoposition:absolute;) i sprawia, że ​​strona jest rzeczywiście szersza niż 100% viewport z - więc będzie przewijana w poziomie.

Aby zapobiec ustawieniu przewijania w poziomieoverflow-x:hidden do mojego.page-wrapper.

Jeśli to zrobię, pionowe przewijanie mojej normalnej zawartości jest naprawdę błędne i nie działa poprawnie.

Jakieś pomysły, jak to naprawić?

AKTUALIZACJA

-webkit-overflow-scrolling: touch; wydaje się działać dobrze, ponieważ żaden javascript nie zmienia żadnych wysokości. Zobacz poniższy przykład. To, co tutaj robię, to aktualizacja wysokości ciała do wysokości zawartości drugiej warstwy - więc nie ma pustej przestrzeni przewijania po przesunięciu górnej warstwy w lewo. Podczas przesuwania górnej warstwy z powrotem usuwam attribtestyle (który ustawia wysokość) z ciała. Po wykonaniu tej czynności przewijanie jest ponownie przerywane.

function showInfos(show) {

    if ( show ) {
        $('#videos').addClass('slid');
        $('body').height($('#infos > .content').height());
        $('#page-wrap').addClass('no-overflow');
    } else if ( !show ) {
        $('#videos').removeClass('slid');
        $('#page-wrap').removeClass('no-overflow');
        $('body').removeAttr('style');
    }
}