Я пытаюсь добиться следующего на 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 , но не знаю, сработает ли это для двух делений: горизонтального и вертикального