CSS / JS-трансформация: translate3d и прокрутка - гладко на Android, нет импульса на iPhone

Question

CSS / JS-трансформация: translate3d и прокрутка - гладко на Android, нет импульса на iPhone

0

В настоящее время у меня есть проект мобильного сайта, в котором я создаю панели, так что одна панель может просматриваться одновременно, когда пользователь просматривает влево или вправо, панель слайд-шоу и новая панель слайдов. Все отлично работает на Android, и даже поведение приемлемо для iPhone.

Однако прокрутка на iPhone, похоже, не имеет импульса. Другими словами, когда "щелкнет" панель вверх/вниз, она прокручивается на Android изначально, но на iPhone она, похоже, быстро теряет импульс. Я бы хотел найти простое CSS или комбинированное решение CSS/JS, которое работает, без возможности добавления дополнительных библиотек.

Здесь основная структура сайта:

<html>
    <head>Head stuff here</head>
    <body>
        <div class="container">
            <div class="headbox">Fixed position menu here</div>
            <div id="pages">
                <div class="page">Page panel here</div>
                <div class="page">Page panel here</div>
                <div class="page">Page panel here</div>
            </div>
            <div class="bottommenu">Fixed position bottom menu here</div>
        </div>
    </body>
</html>

Вот базовый CSS:

body {
    width:100%;
    overflow-x:hidden;
    font-size:17px;
    border-collapse:collapse;
}
.container {
    width:100%;
    height:100%;
    overflow-x:hidden;
overflow-y:scroll;
    position:relative;
    /*-webkit-perspective:1000;
-webkit-backface-visibility:hidden;*/
}
.headbox {
font-size:17px;
    height:2.3529em;
    width:100%;
    top:0;
    position:fixed;
    text-align:center;
    color:#fff;
    z-index:1;
}
#pages {
    width:100%;
    height:100%;
    white-space:nowrap;
    font-size:0;
    -webkit-backface-visibility:hidden;
-webkit-transform-style:preserve-3d;
    position:relative;
    -webkit-transform:translate3d(-100%,0,0);
    -moz-transform:translate3d(-100%,0,0);
    -ms-transform:translate3d(-100%,0,0);
    -o-transform:translate3d(-100%,0,0);
    transform:translate3d(-100%,0,0);
}
.page {
    width:100%;
    height:100%;
    display:inline-block;
    vertical-align:top;
position:relative;
white-space:normal;
    background:#fff;
font-size:17px;
}
.bottommenu {
    position:fixed;
bottom:0;
    left:0;
    width:100%;
    height:.2em;
    transition:height 400ms;
    -webkit-transition:height 400ms;
    -moz-transition:height 400ms;
    -ms-transition:height 400ms;
    -o-transition:height 400ms;
    z-index:1;
}

И, наконец, слушатель для прокрутки, который не должен вмешиваться в CSS или возможность перерисовывать, но, может быть, я чего-то не хватает:

var that = this;
$(document).scroll(function(){
if (!that.direction && !that.loading) {
    that.direction = 'vertical';
    that.moving = true;
    if (that.scrolling) { clearTimeout(that.scrolling); }
    that.scrolling = setTimeout(function() {
    that.direction = false;
    that.sliding = 0;
    that._getMore();
    that.moving = false;
    },500);
}
});

Есть идеи? Я пробовал множество вариаций -webkit-overflow-scrolling: touch; , overflow-y: прокрутка; , и другие возможные хаки/исправления/поддерживаемый синтаксис, но ничего не помогает. Мне нужно, чтобы содержимое прокручивалось в теге body, чтобы на iPhone экран изменился на прокрутку, иначе я бы использовал прокручиваемый div. Это не вариант.

Lazerblade 25 нояб. 2013, в 18:35

Источник

Теги:

javascript

html

android

css

ios

1 ответ

Ещё вопросы

Dimitry · Answer 1 · 2014-02-05T08-54-00.000Z

Я думаю, проблема с потерей собственной эластичной прокрутки в контейнере с position: relative; overflow: hidden position: relative; overflow: hidden.

Try -webkit-overflow-scrolling: touch; для. .container.