Angular 打字脚本中的水平滚动

我有一个带有滚动条的SVG元素。我想让它在鼠标滚轮上水平滚动。

我使用

（控制盘）

事件触发方法

move（）

我没有看到滚动条的任何移动

有没有什么方法可以让我自动触发动作

或者，我应该使用css实现滚动吗

我将非常感谢任何关于如何进一步进行的最佳方式的建议

更新：

在.html中，我添加了一个

id=“container”

，我在.ts文件中访问了它：

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

我从左向右移动，但我不能从右向左移动

使用

（wheel）

在

div

中声明

wheel

事件处理程序，无需使用

addEventListener

显式添加另一个侦听器

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

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

onWheel（事件：WheelEvent）：无效{
（event.target）.parentElement.scrollLeft+=event.deltaY；
event.preventDefault（）；
} 

---

请查看此

以双向滚动

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

---

谢谢你的意见。不幸的是，水平滚动还不能工作，我得到了一个奇怪的错误：

\u co.onWheel不是Object.eval[as handleEvent]

Update的函数：我得到了一个错误，因为我调用了

move（）

方法，而不是

onWheel（）

，所以我刚刚重命名了它。现在我没有收到任何错误，只是鼠标事件上的滚动条没有移动。请尝试使用event.deltaYIt与deltaY不兼容。我想知道

.parentElement.scrollLeft

，因为我在定义滚动的元素的父元素上使用了

（wheel）=onWheel（$event）

方法。当我们说

parentElement.scrollLeft

时，这不是滚动定义方法的当前元素的parentElement吗？我也这样做了，但不幸的是它没有水平移动滚动条…我不知道尝试使用css这样做是否是个好主意！？

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

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

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

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