Как прокрутить два элемента div (один по горизонтали, а другой по вертикали - заголовок, содержимое) одновременно с помощью iScroll - PullRequest
0 голосов
/ 02 марта 2020

Я пытаюсь добиться следующего на jQuery -

HTML PAGE

url


AB C DEF

GHI

JKL

Поэтому, когда пользователь попадает на страницу, мне нужно показать AB C на горизонтальной прокрутке и GHI на вертикальной прокрутке. Когда пользователь прокручивает экран, GHI прокручивает вверх, чтобы показать JKL и AB C прокручивает влево, чтобы показать DEF.

Это должно происходить одновременно.

Мы используем iscroll-lite. js так как это приложение iPAD с HTML / CSS / jQuery.

Пример кода того, что я использую -

var testScroll1 = new iScroll('ssi_overlay',{    
     bounce: false, hideScrollbar: false, onBeforeScrollStart: function (e) {
        e.preventDefault();
        e.stopPropagation();
    },
    onScrollMove :  function () {
        console.log(this.y);
        if(this.y > lastScrollTop){
            leftValue = $(".head1").css('left').replace(/[^-\d\.]/g, '');
            if(leftValue < 184){
                leftValue = parseInt(leftValue)+parseInt(150);
            }
            if(scrollFlag2 != true){
                $(".head1").css({"left":leftValue});
            }
            if(leftValue > 184){
                scrollFlag2 = true;
            } else {
                scrollFlag2 = false;
            }
        } else if(this.y < lastScrollTop){
            leftValue = $(".head1").css('left').replace(/[^-\d\.]/g, '');
            if(leftValue > -1325){
                leftValue = leftValue-150;
            }
            if(scrollFlag != true){
                $(".head1").css({"left":leftValue});
            }
            if(leftValue < -1325){
                scrollFlag = true;
            } else {
                scrollFlag = false;
            }
        }
        lastScrollTop = this.y;
        /*if(this.y < -850)
        {
            $('.head1').hide();
            $('.head2').show();
        }
        else  {
            $('.head2').hide();
            $('.head1').show();
        }*/
    }

 });

Я рассчитываю смещение вертикальной прокрутки и, основываясь на расстоянии, перемещая заголовок слева направо.

Основная проблема с этим логи c заключается в том, что при перемещении по прокрутке, если пользователь прокручивает содержимое с помощью одной прокрутки, логи c терпит неудачу и заголовок застревает между заголовками - что-то вроде -

B C + DE вместо того, чтобы просто показывать DEF

EDIT - найдена похожая проблема / решение - как прокручивать 2 деления одновременно с помощью iScroll , но не знаю, сработает ли это для двух делений: горизонтального и вертикального

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...