Например в плей маркете при скролле вниз прячется панель:
При скролле вверх она плавно выдвигается:
1. Как сделал я.
Использовал два события ionScrollStart и ionScroll
<ion-content class="contentupdate" (ionScrollStart)="list.scrollStart($event)" (ionScroll)="list.scrollHandler($event)">
typescript
scrollHandler(event){
if(this.zone == null){
alert('Подключите зону в конструкторе!');
return;
}
let me=this;
this.zone.run(()=>{
me.scrolltoplast=event.scrollTop;
if(event.directionY == 'down'){
console.log('down');
if(me.scrollAmount <= -25){
me.header.style.top = '2.5rem';
}else{
me.scrollAmount--;
}
}
else{
console.log('up');
if(me.scrollAmount >= 0){
me.header.style.top= '0rem';
}else{
me.scrollAmount++;
}
}
me.header.style.top= (me.scrollAmount/10) +'rem';
});
}
typescript
scrollStart(event){
if(this.zone == null){
alert('Подключите зону в конструкторе!');
return;
}
let me=this;
this.zone.run(()=>{
if(me.header == null)
me.header=<HTMLElement>document.getElementsByClassName('toolbar_mytasks')[0];
console.log(me.header.style.top);
me.scrollAmount = Number(me.header.style.top.split('rem')[0])*10;
console.log(me.scrollAmount+'init');
});
}
Проблема в том что если быстро скролить, то блок выезжает совсем немного. То есть событие ionScroll вызывается недостаточно много раз.
Как правильно реализовать эту задачу?
