Get clientheight dom is wrong when scrolling fast

hi
i am trying to create parallax header so when you scroll bottom get scrollTop value and decrease from ion-toolbar height so toolbar going to be shorter thatn before and otherwise when you try to scrolldown get scrollTop value and increase to height of ion-toolbar.
i did it but when i scroll faster normal scrollTop or other detail so can help me goes to be wrong.
how can i force user scrolling top and down with normal speed always thanks
this is my code

Screen Shot 1399-09-12 at 17.56.491602×254 38.5 KB

Blockquote

@Directive({
selector: ‘[fadeHeader2]’
})
export class FadeHeader2Directive {
@Input(‘fadeHeader2’) toolbar: any;
public clientHeight = 200;

constructor(public renderer2: Renderer2, private element: ElementRef, public domCtrl: DomController) { }

ngOnInit() {
console.log(this.toolbar);

this.toolbar = this.toolbar.el;

}

tmp = 0;
@HostListener(‘ionScroll’, [’$event’]) onContentScroll($event) {

let scrollTop = $event.detail.scrollTop;
let hex = scrollTop.toString(16)
console.log("top" + scrollTop);

if (scrollTop >= 1 && scrollTop < 133 ) {
  console.log("lower")
  this.tmp = this.clientHeight - scrollTop;
  console.log(this.tmp);

  this.domCtrl.write(() => {
    this.toolbar.style.setProperty('height', `${this.tmp}px`);
    // this.toolbar.style.setProperty('transition', `border-bottom box-shadow 100ms`);

    // this.toolbar.style.setProperty('border-bottom', `0.5px solid rgb(0 0 0 / 64%)`);
    this.toolbar.style.setProperty('box-shadow', `0px 3px 8px -2px rgba(0,0,0,0.75)`);
  });
}

if (scrollTop <= 5) {
  console.log("here camtar az zero")
  // this.toolbar.style.setProperty('transition', `border-bottom box-shadow 100ms`);
  this.toolbar.style.setProperty('border-bottom', `none`);
  this.toolbar.style.setProperty('box-shadow', `none`);
}

}

}

Screen Recording 1399-09-12 at 17.05.47450×596 830 KB

1 post - 1 participant

Read full topic