CODEWITHSUNDEEP
angulartypescriptmousewheel
dernor00
dernor00

Reputation: 271

Horizontal scroll in typescript

I have this SVG element with a scroll bar. I want to make it horizontally scrollable on mouse wheel. scrollable svg

I use the (wheel) event to trigger the method move() 

<div id="tab-primary-wrapper" class="inner-wrapper" (wheel)="move()" #scrollable style="overflow: auto" >
   <div>

which does this: 

 move(){
    var el = document.querySelector('#tab-primary-wrapper .inner-wrapper')
    if(el){
     el.addEventListener('mousewheel', function(e: WheelEvent) {
       this.scrollLeft += e.deltaX;
       e.preventDefault();
     });
    }
  }

I'm not getting any movement of the scrollbar!

Is there any method which I can use that triggers the movement automatically?

Or, should I implement the scrolling using css?

I would very much appreciate any suggestion, of how would the best way be to proceed further.

Update:

In the .html I added an id="container" which I accessed in the .ts file: 

<div id="container" #scrollable style="overflow-x: scroll" (wheel)="onWheel($event)">
    <div>

In the typescript I defined: 

onWheel(event: WheelEvent): void {
    console.log("move...");
      document.getElementById('container').scrollLeft += 40;
  }

where I move from left to right but I cannot move then from right to left.

Upvotes: 0

Views: 12307

Answers (2)

Ibrahim Ali
Ibrahim Ali

Reputation: 2511

To scroll on both ways...

  onWheel(event: WheelEvent): void {
    if (event.deltaY > 0) document.getElementById('container')!.scrollLeft += 40;
    else document.getElementById('container')!.scrollLeft -= 40;
  }

Upvotes: 3

uminder
uminder

Reputation: 26190

With (wheel) inside the div, you declare a wheel event handler, there's no need to explicitly add another listener using addEventListener.

<div ... (wheel)="onWheel($event)" ... ><div>

onWheel(event: WheelEvent): void {
   (<Element>event.target).parentElement.scrollLeft += event.deltaY;
   event.preventDefault();
}

Please have a look at this StackBlitz

Upvotes: 2

Related Questions