title: Horizontal scroll in typescript
body: <p>I have this SVG element with a scroll bar. I want to make it horizontally scrollable on mouse wheel. 
  <a href="https://i.stack.imgur.com/h2m9J.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/h2m9J.png" alt="scrollable svg"></a></p>
  
  <p>I use the <code>(wheel)</code> event to trigger the method <code>move()</code> </p>
  
  <pre><code>&lt;div id="tab-primary-wrapper" class="inner-wrapper" (wheel)="move()" #scrollable style="overflow: auto" &gt;
     &lt;div&gt;
  </code></pre>
  
  <p>which does this: </p>
  
  <pre><code> move(){
      var el = document.querySelector('#tab-primary-wrapper .inner-wrapper')
      if(el){
       el.addEventListener('mousewheel', function(e: WheelEvent) {
         this.scrollLeft += e.deltaX;
         e.preventDefault();
       });
      }
    } 
  </code></pre>
  
  <p>I'm not getting any movement of the scrollbar!</p>
  
  <p>Is there any method which I can use that triggers the movement automatically?</p>
  
  <p>Or, should I implement the scrolling using css?</p>
  
  <p>I would very much appreciate any suggestion, of how would the best way be to proceed further. </p>
  
  <p><strong>Update:</strong></p>
  
  <p>In the .html I added an <code>id="container"</code> which I accessed in the .ts file: </p>
  
  <pre><code>&lt;div id="container" #scrollable style="overflow-x: scroll" (wheel)="onWheel($event)"&gt;
      &lt;div&gt;
  </code></pre>
  
  <p>In the typescript I defined: </p>
  
  <pre><code>onWheel(event: WheelEvent): void {
      console.log("move...");
        document.getElementById('container').scrollLeft += 40;
    }
  </code></pre>
  
  <p>where I move from left to right but I cannot move then from right to left. </p>