diff --git a/scilog/package-lock.json b/scilog/package-lock.json
index d1ae3ab5..8410ffc9 100644
--- a/scilog/package-lock.json
+++ b/scilog/package-lock.json
@@ -28,12 +28,13 @@
         "ng2-charts": "^4.1.1",
         "ngx-cookie-service": "^14.0.1",
         "ngx-jdenticon": "^2.0.0",
-        "ngx-ui-scroll": "^1.11.0-rc.1",
+        "ngx-ui-scroll": "^3.2.0-beta.2",
         "node-polyfill-webpack-plugin": "^2.0.1",
         "prismjs": "^1.28.0",
         "prismjs-components-importer": "^0.2.0",
         "rxjs": "^7.8.0",
         "stream-browserify": "^3.0.0",
+        "vscroll": "^1.6.0-beta.4",
         "webpack": "^5.70.0",
         "zone.js": "~0.11.4"
       },
@@ -10585,23 +10586,18 @@
       }
     },
     "node_modules/ngx-ui-scroll": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/ngx-ui-scroll/-/ngx-ui-scroll-1.11.1.tgz",
-      "integrity": "sha512-0h8EVaUeF0iun7+LRWwPOd/iLmbwr2YF57+VrePSSMu+tHNg1Baay/uq/fTXBvMeZ+iPFt9wD/3zuGgv/ZFYng==",
+      "version": "3.2.0-beta.2",
+      "resolved": "https://registry.npmjs.org/ngx-ui-scroll/-/ngx-ui-scroll-3.2.0-beta.2.tgz",
+      "integrity": "sha512-acMJ5bV/PQYfOQLioUQMJfDJsPrOYig4egBNIrsdNq3L/yoIBNZy1F/9pY6Z+L+nim4u+sRpnYeLSNYgCJrzkQ==",
       "dependencies": {
-        "tslib": "^1.9.0"
+        "tslib": "^2.2.0"
       },
       "peerDependencies": {
-        "@angular/common": ">= 5.0.0",
-        "@angular/core": ">= 5.0.0",
-        "rxjs": ">= 5.5.0"
+        "@angular/common": ">=12.0.0",
+        "@angular/core": ">=12.0.0",
+        "vscroll": "1.6.0-beta.4"
       }
     },
-    "node_modules/ngx-ui-scroll/node_modules/tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-    },
     "node_modules/nice-napi": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz",
@@ -15192,6 +15188,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/vscroll": {
+      "version": "1.6.0-beta.4",
+      "resolved": "https://registry.npmjs.org/vscroll/-/vscroll-1.6.0-beta.4.tgz",
+      "integrity": "sha512-RcwJ9Hz5r6A3ZYQguf/8P3qkP3T8Ra9hQruPKRjWjEENGg6SywRBZ5e5LcBQ0KBdX/JKt1cpdrrbUf9a6km5vQ==",
+      "dependencies": {
+        "tslib": "^2.3.1"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -23588,18 +23592,11 @@
       }
     },
     "ngx-ui-scroll": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/ngx-ui-scroll/-/ngx-ui-scroll-1.11.1.tgz",
-      "integrity": "sha512-0h8EVaUeF0iun7+LRWwPOd/iLmbwr2YF57+VrePSSMu+tHNg1Baay/uq/fTXBvMeZ+iPFt9wD/3zuGgv/ZFYng==",
+      "version": "3.2.0-beta.2",
+      "resolved": "https://registry.npmjs.org/ngx-ui-scroll/-/ngx-ui-scroll-3.2.0-beta.2.tgz",
+      "integrity": "sha512-acMJ5bV/PQYfOQLioUQMJfDJsPrOYig4egBNIrsdNq3L/yoIBNZy1F/9pY6Z+L+nim4u+sRpnYeLSNYgCJrzkQ==",
       "requires": {
-        "tslib": "^1.9.0"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-        }
+        "tslib": "^2.2.0"
       }
     },
     "nice-napi": {
@@ -26997,6 +26994,14 @@
       "integrity": "sha512-qZKX4RnBzH2ugr8Lxa7x+0V6XD9Sb/ouARtiasEQCHB1EVU4NXtmHsDDrx1dO4ne5fc3J6EW05BP1Dl0z0iung==",
       "dev": true
     },
+    "vscroll": {
+      "version": "1.6.0-beta.4",
+      "resolved": "https://registry.npmjs.org/vscroll/-/vscroll-1.6.0-beta.4.tgz",
+      "integrity": "sha512-RcwJ9Hz5r6A3ZYQguf/8P3qkP3T8Ra9hQruPKRjWjEENGg6SywRBZ5e5LcBQ0KBdX/JKt1cpdrrbUf9a6km5vQ==",
+      "requires": {
+        "tslib": "^2.3.1"
+      }
+    },
     "watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
diff --git a/scilog/package.json b/scilog/package.json
index 72b59b6e..9178a3ec 100644
--- a/scilog/package.json
+++ b/scilog/package.json
@@ -34,12 +34,13 @@
     "ng2-charts": "^4.1.1",
     "ngx-cookie-service": "^14.0.1",
     "ngx-jdenticon": "^2.0.0",
-    "ngx-ui-scroll": "^1.11.0-rc.1",
+    "ngx-ui-scroll": "^3.2.0-beta.2",
     "node-polyfill-webpack-plugin": "^2.0.1",
     "prismjs": "^1.28.0",
     "prismjs-components-importer": "^0.2.0",
     "rxjs": "^7.8.0",
     "stream-browserify": "^3.0.0",
+    "vscroll": "^1.6.0-beta.4",
     "webpack": "^5.70.0",
     "zone.js": "~0.11.4"
   },
diff --git a/scilog/src/app/logbook/core/scroll-base.service.ts b/scilog/src/app/logbook/core/scroll-base.service.ts
index 89668c2b..cdef7eb5 100644
--- a/scilog/src/app/logbook/core/scroll-base.service.ts
+++ b/scilog/src/app/logbook/core/scroll-base.service.ts
@@ -70,7 +70,7 @@ export class ScrollBaseService {
   }
 
   remove(id: string) {
-    this.datasource.adapter.remove({ predicate: ({ data }) => data.id === id });
+    this.datasource.adapter.remove({ predicate: ({ data }) => (data as {id: string}).id === id });
   }
 
   reset() {
diff --git a/scilog/src/app/overview/logbook-icon-scroll-service.service.spec.ts b/scilog/src/app/overview/logbook-icon-scroll-service.service.spec.ts
index b3efaf3f..eada2641 100644
--- a/scilog/src/app/overview/logbook-icon-scroll-service.service.spec.ts
+++ b/scilog/src/app/overview/logbook-icon-scroll-service.service.spec.ts
@@ -2,7 +2,7 @@ import { TestBed } from '@angular/core/testing';
 import { LogbookDataService } from '@shared/remote-data.service';
 
 import { LogbookIconScrollService } from './logbook-icon-scroll-service.service';
-import { AdapterMethodResult, IDatasource } from 'ngx-ui-scroll/src/component/interfaces';
+import { IDatasource } from 'ngx-ui-scroll';
 
 describe('LogbookIconScrollServiceService', () => {
   let service: LogbookIconScrollService;
@@ -24,7 +24,7 @@ describe('LogbookIconScrollServiceService', () => {
   });
 
   it('should test getData', async () => {
-    service['datasource'] = {adapter: {relax: async () => ({} as AdapterMethodResult)}} as IDatasource;
+    service['datasource'] = {adapter: {relax: async () => ({})}} as IDatasource;
     expect(await service.getData(0, 10, {})).toEqual([[1, 2, 3], [4, 5, 6], [7]]);
   });