scrolling a div in angular 4 on button click

Question

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

add code snippet here...

ElusiveCoder
– ElusiveCoder

2018-09-17 10:38:53 +00:00
Commented Sep 17, 2018 at 10:38 — ElusiveCoder
– ElusiveCoder, Commented Sep 17, 2018 at 10:38
you did not close div with </div>

לבני מלכה
– לבני מלכה

2018-09-17 10:43:09 +00:00
Commented Sep 17, 2018 at 10:43 — לבני מלכה
– לבני מלכה, Commented Sep 17, 2018 at 10:43
marginLeft is working but not scrollleft

Gopinath Shetty
– Gopinath Shetty

2018-09-17 10:48:03 +00:00
Commented Sep 17, 2018 at 10:48 — Gopinath Shetty
– Gopinath Shetty, Commented Sep 17, 2018 at 10:48

miladfm · Accepted Answer · 2018-09-17 10:56:08Z

2

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

answered Sep 17, 2018 at 10:56

miladfm

1,52613 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abhishek Ekaanth · Accepted Answer · 2018-09-17 10:48:08Z

0

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.

answered Sep 17, 2018 at 10:48

Abhishek Ekaanth

2,5872 gold badges24 silver badges41 bronze badges

Collectives™ on Stack Overflow

scrolling a div in angular 4 on button click

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related