javascript - 单击按钮以 Angular 4 滚动 div

Question

我希望 div 的内容在单击一个按钮时向左滚动，在单击另一个按钮时向右滚动。

ScrollLeft 似乎不起作用..

html

<button id="Left" (click)="leftScroll()">Left</button>       
<div id="myDiagramDiv1" style=" overflow: hidden; overflow-y: hidden;"></div>
<button id="right" (click)="rightScroll()">Right</button>   

代码

export class ComponentViewPage implements OnInit {

   leftScroll() {     
        event.preventDefault();
        $('myDiagramDiv1').animate({
            scrollLeft: "+=200px"
        }, "slow");       
    }    

    rightScroll() {     
        event.preventDefault();
        $('myDiagramDiv1').animate({
            scrollLeft: "-=200px"
        }, "slow");       
    }    
}

Answer 1

如果你想使用 jquery，你必须安装它:

1- 安装 jquery

npm i jquery --save

2-将其导入angular.json

node_modules/jquery/dist/jquery.js

3- 在组件中使用它

import * as JQuery from "jquery";
const $ = JQuery.default;

查看实例:https://stackblitz.com/edit/angular-ffzzm9