Can I use this library with angular 4 framework ?

[rainstormza]

Can I use this library with angular 4 framework ?

I 've tried this but nothing happens

import { Component, OnInit, AfterViewInit } from '@angular/core';

import Scrollbar from "smooth-scrollbar";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit {
  title = 'app works!';

  ngOnInit() {
  	console.log(Scrollbar);
  }

  ngAfterViewInit() {
  	const elem = document.createElement("div");

	const scrollbar = Scrollbar.init(elem, {
	    continuousScrolling: true,
	    damping: 5,
	    overscrollDamping: 5,
	    overscrollEffect: "glow",
	    overscrollEffectColor: "green",
	    renderByPixels: true,
	    speed: 1,
	    syncCallbacks: true,
	    thumbMinSize: 1
	});

	Scrollbar.has(elem);
	Scrollbar.get(elem) === scrollbar;

	scrollbar.targets.container;
	scrollbar.targets.xAxis.track;

	scrollbar.update(true);
	scrollbar.setPosition(10, 10);

	scrollbar.addListener(status => status.direction);
	scrollbar.infiniteScroll(status => status.direction.y);

	scrollbar.hideTrack("both");
	scrollbar.showTrack("x");
	scrollbar.destroy(true);

	
  }
}

html file

<div id="my-scrollbar" >
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>

</div>

any suggestion ?
thanks

[idiotWu]

const elem = document.createElement("div");

I think you should init scrollbar on an element that already exists in the document, try:

const elem = document.querySelector("#my-elem");
Scrollbar.init(elem);

[rainstormza]

I 've tried that but it doesn't work :(

[idiotWu]

I'm not familiar with angular4, can you provide a link to the repository so that I can test it myself?

[rainstormza]

https://github.com/rainstormza/ng4smoothscroll

this is my reposotory.
I already import your library and test some
you can look at my comment code

smoothscroll\src\app\app.component.ts
smoothscroll\src\app\app.component.html

you can implement with two of these files

ps. before test project you might be install these package
npm install -g typescript
npm install -g @angular/cli

thanks for your help :)

[idiotWu]

Thanks. Will have a look.

[idiotWu]

@rainstormza hey dude, your problem is not about the initialization of scrollbar, you should give an explicit size to the container element, for example:

#my-scrollbar {
  height: 500px;
  width: 500px;
}

You can refer to common mistakes section for more information :)

[rainstormza]

it works @idiotWu
thanks

[yohanelly95]

What version of typescript does smooth-scrollbar support? I keep getting this error - ../node_modules/smooth-scrollbar/track/direction.d.ts (2,9): In ambient enum declarations member initializer must be constant expression.

[idiotWu]

@yohanelly95 this project was developed under typescript 3.6.3.