Я хочу, чтобы содержимое 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");       
    }    
}
0
Gopinath Shetty 17 Сен 2018 в 13:34

2 ответа

Лучший ответ

Если вы хотите использовать 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
miladfm 17 Сен 2018 в 10:56

Попробуйте в HTML

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

В компоненте определить идентификатор в HTML id="scrollId"

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

Вы можете использовать document.getElementById, если querySelector вам не подходит.

0
Abhishek Ekaanth 17 Сен 2018 в 10:48