CODEWITHSUNDEEP
javascripthtmlcssangular
Gopinath Shetty
Gopinath Shetty

Reputation: 37

scrolling a div in angular 4 on button click

I want the contents of a div to scroll to left on click of a button and right on click of another button.

ScrollLeft does'nt seem to work..

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>

code

export class ComponentViewPage implements OnInit {

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

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

Upvotes: 0

Views: 1261

Answers (2)

miladfm
miladfm

Reputation: 1526

if you want to use jquery, you have to inistall it:

1- inistall jquery

npm i jquery --save

2- import it into angular.json

node_modules/jquery/dist/jquery.js

3- use it into component

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

see live example: https://stackblitz.com/edit/angular-ffzzm9

Upvotes: 2

Abhishek Ekaanth
Abhishek Ekaanth

Reputation: 2569

try into HTML

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

In Component define id into html id="scrollId"

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

you can use document.getElementById if querySelector isn't working for you.

Upvotes: 0

Related Questions