在按钮单击时以 4 角滚动 div答案

【问题标题】：scrolling a div in angular 4 on button click在按钮单击时以 4 角滚动 div
【发布时间】：2018-09-17 18:56:08
【问题描述】：

我希望 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");       
    }    
}

【问题讨论】：

在此处添加代码 sn-p...
你没有用</div>关闭div
marginLeft 工作但不能向左滚动

标签： javascript html css angular

【解决方案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

【讨论】：

【解决方案2】：

尝试 HTML

<div #list [scrollTop]="list.scrollHeight"></div>

在组件中将id定义成html id="scrollId"

const element = document.querySelector('#scrollId');
element.scrollIntoView();

如果querySelector 不适合您，您可以使用document.getElementById。

【讨论】：