0

I have a tried and tested bit of code that has always worked well for me. But when i tried it in Angular 6, it was failed.

I want to make auto scroll down without button click in my page (contain table).

index.html

<!doctype html>
<html lang="en">

<head>
   <meta charset="utf-8">
   <title>Dashboard</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon_new.ico">
   <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
   <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.css' rel='stylesheet' />   
</head>
<body>
   <app-root></app-root>
   <script src="./src/assets/jquery.js"></script>
   <script src="./src/assets/app.js"></script>
</body>
</html>

app.js

setInterval(function(){
  $("html, body").animate({ scrollTop: $(document).height() }, 1000);
 setTimeout(function() {
   $('html, body').animate({scrollTop:0}, 8000);
 },2000);
},2000);

activity-dashboard.component.html

<div id="contain" class="row">
 <div eds-tile class="xl-12">
    <eds-tile-title>User on Shift</eds-tile-title>
    <eds-table id="table_scroll" [columns]="tablePresetColumns" [data]="tablePresetData" [modes]="['compact', 'dashed']"></eds-table>
 </div>
</div>

Anyone can help solve my problem ? Thanks...

tonjel
  • 99
  • 1
  • 4
  • 12
  • 1
    don't use jquery, let's start there ;) – AT82 Feb 21 '19 at 18:00
  • what do you mean sir @AJT_82 ? – tonjel Feb 21 '19 at 18:04
  • why Don't you try `ViewportScroller` from angular, instead of using jQuery with Angular here https://angular.io/api/common/ViewportScroller – Pardeep Jain Feb 21 '19 at 18:05
  • check the value of `document.body.clientHeight` and `window.innerHeight` , if you body height is set 100% (<= height of your screen) and inner content height is more than that, then scrollTo does not works – Rajan Feb 21 '19 at 18:08
  • @Pardeep I cannot figure out how to use the function of viewportscroller – tonjel Feb 21 '19 at 18:10
  • they are same, my document.body.clientHeight = 551, and my document.body.clientHeight = 551 sir @Rajan . So what should i do ? – tonjel Feb 21 '19 at 18:12
  • 1
    A bit off-topic but.. @PardeepJain Whoa, thanks for the link, I have totally missed ViewportScroller, didn't know it existed. Big thanks, very useful! :) – AT82 Feb 21 '19 at 18:14
  • 1
    @AJT_82 Seems some of the function can be replaced as OP using jQuery like `getScrollPosition` etc. Anyways Cheers! #HappyLearning – Pardeep Jain Feb 21 '19 at 18:18
  • @tonjel if you got scroll in your page, then this might be the case https://stackoverflow.com/questions/1174863/javascript-scrollto-method-does-nothing/54799200#54799200 – Rajan Feb 21 '19 at 18:24
  • @tonjel It's just discouraged to use jQuery with Angular. Usually there is "an Angular way" of doing the same :) And if you are planning to use jQuery to manipulate the DOM, it's a bigger no-no. Here's a post I found when rushing through google: https://www.reddit.com/r/Angular2/comments/92lpy4/reasons_not_to_use_jquery_angular/e36n5a2 – AT82 Feb 21 '19 at 18:29

0 Answers0