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- inistall 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

Answer 2

尝试使用HTML

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

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

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

如果document.getElementById对您不起作用，则可以使用querySelector。

单击按钮以角度4滚动div

2 个答案: