Прокрутите div на iPhone из любой точки экрана - PullRequest
Новая
       26

Прокрутите div на iPhone из любой точки экрана

1 голос
/ 03 мая 2011

Я бы хотел запретить действие прокрутки по умолчанию на моей странице на iPhone, за исключением одного элемента div.По сути, когда кто-то проводит пальцем по экрану - в любом месте экрана - этот единственный div должен двигаться.Код, который я использую, прекрасно работает, когда кто-то непосредственно касается элемента div, но в противном случае положение div довольно неустойчиво.Где я все испортил?Это свободная модификация того, что я нашел в Safari Developer Library . 

<div id="testdiv">
   test test test test
</div>
<script type="text/javascript">
        var startY = document.getElementById("testdiv").offsetTop;
        var curY = startY;
        var touchY;

        document.addEventListener('touchstart', function(event) {
            touchY = event.targetTouches[0].pageY;
        }, false);

        document.addEventListener('touchmove',function(event) {
            event.preventDefault();
            curY = event.targetTouches[0].pageY - startY - touchY;
            document.getElementById("testdiv").style.webkitTransform = 'translate(0px,' + curY + 'px)';
        }, false);

        document.addEventListener('touchend',function(event) {
            startY = curY;
        }, false);
</script>

1 Ответ

3 голосов
/ 03 мая 2011

Измените - startY на + startY при изменении значения curY. Проблема была не в том, что это сработало, только когда вы коснулись div. Значение ...pageY - touchY будет расстоянием, на которое касание переместилось с момента его первой записи. Если предыдущее смещение составляло 50 пикселей и было смещено на 20 пикселей вниз, то вы хотите, чтобы новое смещение было 20 + 50, а не 20 - 50. Вы не заметили проблему при первом касании, поскольку начальное значение startY близко к 0. На самом деле, начальное значение startY должно быть 0, а не offsetTop элемента div, поскольку перевод будет применен относительно начального смещения.

...