Обнаружение текущей позиции в прокручиваемом DIV - PullRequest
Новая
       12

Обнаружение текущей позиции в прокручиваемом DIV

1 голос
/ 23 июня 2011

Используя интегрированную среду iScroll4, мы имеем совместимые прокрутки в сенсорных операционных системах. Кроме того, у нас есть стрелки с каждой стороны, которые прыгают на 240 пикселей по клику. Это для браузеров, которые не поддерживают CSS3.

Проблема в том, что тогда, когда кто-то прокручивает операционную систему на сенсорном экране, а затем нажимает стрелку, он прокручивает обратно туда, где он был до того, как они это сделали, и затем продвигается на 240 пикселей.

Причина в том, что iScroll не предоставляет информацию для моего смещения глобальной переменной.

Я полагаю, что выходом является использование метода JScuery .Scroll (), чтобы определить, когда div завершил прокрутку, а затем обновить глобальную переменную. Как это сделать - другая история.

Вот скрипка. Используйте кнопки L & R в качестве стрелок влево и вправо, а для тех из вас, у кого браузеры CSS3, проведите некоторое перетаскивание, а затем посмотрите, что происходит, когда вы нажимаете одну из этих кнопок. http://jsfiddle.net/Agp74/5/

Есть идеи, как это отсортировать.

Marvelous

1 Ответ

0 голосов
/ 23 июня 2011

Несколько советов, поскольку мне пришлось написать что-то почти идентичное:

Если у вас есть доступ к тому, когда вызывается $ .animate (), вы можете добавить функцию, используя свойство шага: http://api.jquery.com/animate/

Скроллер, который я построил, использовал свойство left для управления расположением внутреннего элемента div: 

<div id="#outside">
    <div id="#partThatSlides">Content Content Content ...</div>
</div>

Я обнаружил, что могу получить текущую позицию ползунка одним из следующих способов: 

var trueLeft = $('#partThatSlides').offset().left - $('#outside').offset().left;

или 

var trueLeft = parseInt($('#partThatSlides').attr('left'));

из тестирования производительности я обнаружил, что второй почти в 20-50 раз быстрее, чем первый метод

EDIT:

Похоже, из источника используемого вами плагина вы можете связать одно из следующих событий: 

        onBeforeScrollStart: function (e) { e.preventDefault(); },
        onScrollStart: null,
        onBeforeScrollMove: null,
        onScrollMove: null,
        onBeforeScrollEnd: null,
        onScrollEnd: null,
        onTouchEnd: null,

Я полагаю, что вы могли бы выполнить свою логику там.

Я бы переместил конструкцию вашего скроллера в ту же область замыкания, что и ваша "глобальная" (но не глобальная) переменная, поэтому у вас будет что-то вроде этого:

EDIT2:

Вот рабочий код 

$(document).ready(function(){
    var myScroll2,
        offset = 0;

    function scrollHandler() {
        if(this.x || this.x === 0) {
            offset = this.x
        }
    };


    myScroll2 = new iScroll('bkdates', {
        snap: 'div',
        useTransform: false,
        momentum: false,
        hScrollbar: false,
        vScrollbar: false,
        onScrollMove: scrollHandler,
        onScrollEnd: scrollHandler
    });

    $( '#bkarrowsr' ).mouseup( function() {
        offset -= (48 * 5);
            if ( offset < -(85 * 48) ) {
            offset = -(85 * 48); // don't exceed this limit
         }
         myScroll2.scrollTo(offset,0,400);   
    });
    $( '#bkarrowsl' ).mouseup( function() {
        offset += (48 * 5);
        if ( offset > 0 ) {
            offset = 0; // don't exceed this limit
            }
         myScroll2.scrollTo(offset,0,400);
     });
});
...