CODEWITHSUNDEEP
javascriptcssangularscrollbar
Travis
Travis

Reputation: 1816

How do you account for the scrollbar position when dynamically resizing elements in angular 2+?

In my application I have a directive that can apply to divs that will allow them to resize. However, if a scroll bar is moved at all, I'm unable to resize again, unless the scroll bar is back to the top. I know of a way to track scroll bar position, but not sure where to apply it. Here is where I track the scroll position

public last_known_scroll_position = 0;

@HostListener('window:scroll', ['$event']) 
trackScrollBarPos() {
  this.last_known_scroll_position = window.pageYOffset;
}

private inDragRegion(evt: MouseEvent) {
  this.trackScrollBarPos();
  if(this.orientation == "horizontal"){
    return this.el.nativeElement.clientWidth - evt.clientX + this.el.nativeElement.offsetLeft < this.resizableGrabWidth;
  }else if(this.orientation == "vertical"){
   return this.el.nativeElement.clientHeight - evt.clientY + 

  this.el.nativeElement.offsetTop < this.resizableGrabHeight;
  }
}

Where do I put the last known scrollbar position in my equation or am I going about this wrong? Again the application works fine if no scroll bar is present.

See the stackblitz below for the full code https://stackblitz.com/edit/angular-zq5adw

Upvotes: 0

Views: 160

Answers (1)

Anton Rusak
Anton Rusak

Reputation: 936

Use the pageX/pageY instead of clientX/clientY properties of MouseEvent. They are relative to page size instead of viewport size thus scrolling don't affect them. Edited app.

Upvotes: 1

Related Questions