Horizontal scroll in typescript

Question

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

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.

Ibrahim Ali · Accepted Answer · 2021-03-13 19:16:34Z

3

To scroll on both ways...

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

answered Mar 13, 2021 at 19:16

Ibrahim Ali

2,5613 gold badges23 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

uminder · Accepted Answer · 2019-12-24 15:36:45Z

2

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

edited Dec 24, 2019 at 15:36

answered Dec 24, 2019 at 12:50

uminder

26.4k6 gold badges45 silver badges91 bronze badges

6 Comments

dernor00 Over a year ago

thank you for your input. Unfortunately the horizontal scrolling doesn't work yet and I get this strange error: _co.onWheel is not a function at Object.eval [as handleEvent]

dernor00 Over a year ago

Update: I got an error because I called the move() method instead of the onWheel() so that I just renamed. Now I don't get any error but just the scrollbar doesn't move on mouse event.

uminder Over a year ago

Try to use event.deltaY

dernor00 Over a year ago

It doesn't work with deltaY. I wonder if the .parentElement.scrollLeft since I use the (wheel)=onWheel($event) method on the parent, on the element where the scroll is defined. When we say parentElement.scrollLeft doesn't this scroll the parentElement of the current element where the method is defined?

dernor00 Over a year ago

I did this too, but It unfortunately doesn't move the scroll horizontally...I don't know if trying to do this with css would be a good idea!?

|

Collectives™ on Stack Overflow

Horizontal scroll in typescript

2 Answers 2

Comments

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Related