0

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");       
    }    
}
3
  • add code snippet here... Commented Sep 17, 2018 at 10:38
  • you did not close div with </div> Commented Sep 17, 2018 at 10:43
  • marginLeft is working but not scrollleft Commented Sep 17, 2018 at 10:48

2 Answers 2

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

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

Comments

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.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.