zefoy / ngx-perfect-scrollbar Goto Github PK
View Code? Open in Web Editor NEWAngular wrapper library for the Perfect Scrollbar
License: MIT License
Angular wrapper library for the Perfect Scrollbar
License: MIT License
can not make it work with latest angular 2 project built with angular cli
I got the following error when I start ng serve (angular cli v beta.24) with the perfect scroll bar
ERROR in Error encountered resolving symbol values statically. Calling function 'PerfectScrollbarModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in myapp/src/app/app.module.ts, resolving symbol AppModule in myapp/src/app/app.module.ts
I've already had the same problem with other lib (ng2-translate for instance) but upgrading to the laster version resolved the problem...
Could you fix this also for the perfectscrollbar?
Thanks
when u`re using the router, the scrollbar does not detect the height change of the router outlet content, i ve made a few changes, and it is working ok, if u may consider adding them :
template: '<div class="inner-scroll"><ng-content></ng-content></div>',
and in the ngDoCheck function
var height = this.elementRef.nativeElement.getElementsByClassName("inner-scroll")[0].offsetHeight;
the this.elementRef.nativeElement. always has the same height even if the content has changed ,
with that inner scroll div, i get the right new height
Hello,
I'm trying to scrollto an item in the scrollbar container but it does not work. I tried with different other modules like:
With the original perfect-scrollbar it seems to be possible.
Can you help me. Thank you
Hi,
I want to call Ps.update(container);
when active route changes. But how to call these impeded methods from my component ? Is there any service I could inject to my component and call these methods ?
thanks
Hi my friend thanks for your hard work.
I try to install this on my project but i have an error:
GET http://localhost:8000/ngx-perfect-scrollbar 404 (Not Found) zone.js:1561
So i add this to my systemjs.config.js file:
'ngx-perfect-scrollbar': 'npm:ngx-perfect-scrollbar/bundles/ngx-perfect-scrollbar.umd.min.js'
I put on my component this:
<div class="sidebar-wrapper" [perfect-scrollbar]>
<div class="logo logo-dashboard-normal">
<div class="logo-img">
...
And now i have this error:
Here is my config on app.module.ts file:
... [SOME OTHER LIBS]
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
suppressScrollX: true
};
export const routes: Route[] =[
{ path: 'unauthorized', children: [{ path: 'unauthorized', component: UnauthorizedComponent }] }
]
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
DashboardModule,
SidebarModule,
NavbarModule,
FooterModule,
HttpModule,
AuthModule,
RouterModule.forRoot(routes),
PerfectScrollbarModule.forRoot(PERFECT_SCROLLBAR_CONFIG)
],
[SOME OTHER STATEMENTS ...]
What i'm doing wrong? The config on my systemjs.config.js are ok? Thanks.
Hi there,
My current setup is as in the docs meaning:
const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
suppressScrollX: true
};
Which I call in the imports:
PerfectScrollbarModule.forRoot(PERFECT_SCROLLBAR_CONFIG)
Though after the update to Angular 2.4.0 I'm getting the following error when I'm compiling the project:
ERROR in Error encountered resolving symbol values statically. Calling function 'PerfectScrollbarModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in /Projects/WebApp/src/app/app.module.ts, resolving symbol AppModule in /Projects/WebApp/src/app/app.module.ts
The project still runs though.
I tried to wrap it in an exported functions as it requests but it seems that it is no working. Any idaes on this?
Any plans on Angular 4 support?
Implement perfect-scrollbar directive to be able to use directive instead of a component.
add display: block
to the component :host
css.
I'm using this starter https://github.com/AngularClass/angular2-webpack-starter
I'm trying to add this module into it and got this issue when build AoT from above starter
Error: Child compilation failed:
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
at Object.module.exports.pitch (E:\Sang\Projects\angular2-webpack-starter\node_modules\extract-text-webpack-plugin\loader.js:27:9):
Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
I would like to contribute to this project but can not. I have cloned the repo, made some modifications, and try to pull the cloned repo into my app.
The .npmignore file was stopping scr and config directories from installing using npm install .
I removed them from .npmignore. Still can not get the package to install correctly from git.
Please help.
My project render my components on this structure:
<body>
<main-app>Loading...<main-app>
.
.
.
</body>
I able to apply the scrollbars into any component of .
Is any way to apply the scrollbars to the body tag? Thanks!
I try to import the PerfectScrollbarModule in a Module (MainToolbarModule) where we use it in a component who is part of library. That scenario seems to work fine, I have a small project in that library where I can execute and load the perfect-scrollbar.
But when I try to use that library in another project (as a dependency!), I get : «Unexpected value 'PerfectScrollbarModule' imported by the module 'MainToolbarModule'. Please add a @NgModule annotation.»
Have you ever encountered this scenario?
The module where I import PerfectScrollbarModule looks like this (MainToolbarModule is exported and his other components work fine with the application):
...
import {PerfectScrollbarModule} from "ngx-perfect-scrollbar";
...
@NgModule({
imports: [
...
PerfectScrollbarModule
],
schemas: [NO_ERRORS_SCHEMA],
declarations: [
...
],
entryComponents: [
...
],
providers: [
...
],
exports: [
...
],
})
export class MainToolbarModule {
}
Hi!
Is it possible to disable Perfect Scroll on mobile devices? Can't get it to work properly on Iphone/Ipad (Android works) so I want to use the native scroll instead.
I am using the directive like this
<div [perfect-scrollbar]>
//Stuff
</div>
I don't want two div tags btw, so I need a way to disable it on mobile devices.
This can cause all kinds of layout problems.
Just plain simple html with css, please. I am trying to make this work in my project for 15 minutes now and I shouldn't.
The content that is in has changed, I want to update the perfect-scrollbar, how to do?
ERROR in ./~/ngx-perfect-scrollbar/dist/lib/perfect-scrollbar.component.css
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
at Object.module.exports.pitch (C:\work\web-angular\node_modules\extract-text-webpack-plugin\loader.js:27:9)
When I dragging the scrollbar , if mouse pointer is moved outside 'perfect-scrollbar', the scrollbar is disappeared
On a mobile device (Samsung Galaxy S7), I can touch scroll once, thereafter an exception is thrown which prevents further scrolling:
Uncaught TypeError: Cannot read property 'length' of null
at Zone.webpackJsonp.1724.Zone._updateTaskCount (zone.js:224)
at Zone.webpackJsonp.1724.Zone.cancelTask (zone.js:214)
at zone.js:1575
at clearInterval (eval at createNamedFn (zone.js:1483), <anonymous>:3:40)
at HTMLElement.touchStart (touch.js:84)
at ZoneDelegate.webpackJsonp.1724.ZoneDelegate.invokeTask (zone.js:363)
at Zone.webpackJsonp.1724.Zone.runTask (zone.js:166)
at HTMLElement.ZoneTask.invoke (zone.js:416)
webpackJsonp.1724.Zone._updateTaskCount @ zone.js:224
webpackJsonp.1724.Zone.cancelTask @ zone.js:214
(anonymous) @ zone.js:1575
clearInterval @ VM5339:3
touchStart @ touch.js:84
webpackJsonp.1724.ZoneDelegate.invokeTask @ zone.js:363
webpackJsonp.1724.Zone.runTask @ zone.js:166
ZoneTask.invoke @ zone.js:416
Using
ngx-perfect-scrollbar 2.5.0
perfect-scrollbar 0.6.16
I have no customizations to the default config, and just use the "perfect-scrollbar" directive with content too big for the screen.
As a test, if I comment out the easing loop interval created on line 125 of touch.js, the errors go away and scrolling works fine without easing.
I have decided to rename the library to ngx-perfect-scrollbar so that there is less confusion when Angular 4 is released.
I have two scrollbars and want to be able to move them together in the left/right scroll direction.
The way I thought i would try and do this is detect the scroll event and move the other scroll bar the same way that i detected the scroll event from, if there is a better way, then please advice.
Is there a way I can detect the scroll event?
I tried detecting the scroll event by creating a directive "track-scroll" which can track scroll events, but when i add that directive on the same div which also has the perfect-scrollbar directive, the perfect-scrollbar directive fails and i get the below error:
error_handler.js:54EXCEPTION: Error in ./GanttComponent class GanttComponent - inline template:15:33 caused by: Cannot read property 'offsetWidth' of undefined
ErrorHandler.handleError @ error_handler.js:54
(anonymous) @ application_ref.js:261
ZoneDelegate.invoke @ zone.js:242
onInvoke @ ng_zone.js:271
ZoneDelegate.invoke @ zone.js:241
Zone.run @ zone.js:113
(anonymous) @ zone.js:535
ZoneDelegate.invokeTask @ zone.js:275
onInvokeTask @ ng_zone.js:262
ZoneDelegate.invokeTask @ zone.js:274
Zone.runTask @ zone.js:151
drainMicroTaskQueue @ zone.js:433
error_handler.js:56ORIGINAL EXCEPTION: Cannot read property 'offsetWidth' of undefined
ErrorHandler.handleError @ error_handler.js:56
(anonymous) @ application_ref.js:261
ZoneDelegate.invoke @ zone.js:242
onInvoke @ ng_zone.js:271
ZoneDelegate.invoke @ zone.js:241
Zone.run @ zone.js:113
(anonymous) @ zone.js:535
ZoneDelegate.invokeTask @ zone.js:275
onInvokeTask @ ng_zone.js:262
ZoneDelegate.invokeTask @ zone.js:274
Zone.runTask @ zone.js:151
drainMicroTaskQueue @ zone.js:433
error_handler.js:59ORIGINAL STACKTRACE:
ErrorHandler.handleError @ error_handler.js:59
(anonymous) @ application_ref.js:261
ZoneDelegate.invoke @ zone.js:242
onInvoke @ ng_zone.js:271
ZoneDelegate.invoke @ zone.js:241
Zone.run @ zone.js:113
(anonymous) @ zone.js:535
ZoneDelegate.invokeTask @ zone.js:275
onInvokeTask @ ng_zone.js:262
ZoneDelegate.invokeTask @ zone.js:274
Zone.runTask @ zone.js:151
drainMicroTaskQueue @ zone.js:433
error_handler.js:60TypeError: Cannot read property 'offsetWidth' of undefined
at PerfectScrollbarDirective.ngDoCheck (perfect-scrollbar.directive.js:16)
at Wrapper_PerfectScrollbarDirective.ngDoCheck (/PerfectScrollbarModule/PerfectScrollbarDirective/wrapper.ngfactory.js:44)
at CompiledTemplate.proxyViewClass.View_GanttComponent0.detectChangesInternal (/AppModule/GanttComponent/component.ngfactory.js:385)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (view.js:425)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (view.js:620)
at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (view.js:410)
at CompiledTemplate.proxyViewClass.View_AppComponent0.detectChangesInternal (/AppModule/AppComponent/component.ngfactory.js:61)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (view.js:425)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (view.js:620)
at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (view.js:410)
at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.detectChangesInternal (/AppModule/AppComponent/host.ngfactory.js:29)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (view.js:425)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (view.js:620)
at ViewRef_.detectChanges (view_ref.js:170)
at application_ref.js:625
ErrorHandler.handleError @ error_handler.js:60
(anonymous) @ application_ref.js:261
ZoneDelegate.invoke @ zone.js:242
onInvoke @ ng_zone.js:271
ZoneDelegate.invoke @ zone.js:241
Zone.run @ zone.js:113
(anonymous) @ zone.js:535
ZoneDelegate.invokeTask @ zone.js:275
onInvokeTask @ ng_zone.js:262
ZoneDelegate.invokeTask @ zone.js:274
Zone.runTask @ zone.js:151
drainMicroTaskQueue @ zone.js:433
error_handler.js:63ERROR CONTEXT:
ErrorHandler.handleError @ error_handler.js:63
(anonymous) @ application_ref.js:261
ZoneDelegate.invoke @ zone.js:242
onInvoke @ ng_zone.js:271
ZoneDelegate.invoke @ zone.js:241
Zone.run @ zone.js:113
(anonymous) @ zone.js:535
ZoneDelegate.invokeTask @ zone.js:275
onInvokeTask @ ng_zone.js:262
ZoneDelegate.invokeTask @ zone.js:274
Zone.runTask @ zone.js:151
drainMicroTaskQueue @ zone.js:433
error_handler.js:64DebugContext {_view: C…e.proxyViewClass, _nodeIndex: 21, _tplRow: 15, _tplCol: 33}
ErrorHandler.handleError @ error_handler.js:64
(anonymous) @ application_ref.js:261
ZoneDelegate.invoke @ zone.js:242
onInvoke @ ng_zone.js:271
ZoneDelegate.invoke @ zone.js:241
Zone.run @ zone.js:113
(anonymous) @ zone.js:535
ZoneDelegate.invokeTask @ zone.js:275
onInvokeTask @ ng_zone.js:262
ZoneDelegate.invokeTask @ zone.js:274
Zone.runTask @ zone.js:151
drainMicroTaskQueue @ zone.js:433
zone.js:420 Unhandled Promise rejection: Error in ./GanttComponent class GanttComponent - inline template:15:33 caused by: Cannot read property 'offsetWidth' of undefined ; Zone: ; Task: Promise.then ; Value: ViewWrappedError {__zone_symbol__error: Error: Error in ./GanttComponent class GanttComponent - inline template:15:33 caused by: Cannot read…, _nativeError: ZoneAwareError, originalError: TypeError: Cannot read property 'offsetWidth' of undefined
at PerfectScrollbarDirective.ngDoChec…, context: DebugContext, __zone_symbol__stack: "Error: Error in ./GanttComponent class GanttCompon…(http://localhost:4200/vendor.bundle.js:57165:20)"…} Error: Error in ./GanttComponent class GanttComponent - inline template:15:33 caused by: Cannot read property 'offsetWidth' of undefined
at ViewWrappedError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:7012:33)
at ViewWrappedError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:26468:16)
at ViewWrappedError.WrappedError [as constructor] (http://localhost:4200/vendor.bundle.js:26533:16)
at new ViewWrappedError (http://localhost:4200/vendor.bundle.js:56238:16)
at CompiledTemplate.proxyViewClass.DebugAppView.rethrowWithContext (http://localhost:4200/vendor.bundle.js:77328:23)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:77301:18)
at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:4200/vendor.bundle.js:77088:18)
at CompiledTemplate.proxyViewClass.View_AppComponent0.detectChangesInternal (/AppModule/AppComponent/component.ngfactory.js:61:19)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:77103:14)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:77298:44)
at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:4200/vendor.bundle.js:77088:18)
at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.detectChangesInternal (/AppModule/AppComponent/host.ngfactory.js:29:19)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:77103:14)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:77298:44)
at ViewRef.detectChanges (http://localhost:4200/vendor.bundle.js:57165:20)
consoleError @ zone.js:420
_loop_1 @ zone.js:449
drainMicroTaskQueue @ zone.js:453
zone.js:422 ZoneAwareError {__zone_symbol__error: Error: Uncaught (in promise): Error: Error in ./GanttComponent class GanttComponent - inline templat…, rejection: ViewWrappedError, promise: ZoneAwarePromise, zone: Zone, task: ZoneTask}
consoleError @ zone.js:422
_loop_1 @ zone.js:449
drainMicroTaskQueue @ zone.js:453
error_handler.js:54 EXCEPTION: Cannot read property 'forEach' of undefined
ErrorHandler.handleError @ error_handler.js:54
next @ application_ref.js:348
schedulerFn @ async.js:93
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:79
NgZone.triggerError @ ng_zone.js:331
onHandleError @ ng_zone.js:292
ZoneDelegate.handleError @ zone.js:246
Zone.runTask @ zone.js:154
ZoneTask.invoke @ zone.js:345
data.args.(anonymous function) @ zone.js:1376
error_handler.js:59 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ error_handler.js:59
next @ application_ref.js:348
schedulerFn @ async.js:93
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:79
NgZone.triggerError @ ng_zone.js:331
onHandleError @ ng_zone.js:292
ZoneDelegate.handleError @ zone.js:246
Zone.runTask @ zone.js:154
ZoneTask.invoke @ zone.js:345
data.args.(anonymous function) @ zone.js:1376
error_handler.js:60 TypeError: Cannot read property 'forEach' of undefined
at http://localhost:4200/main.bundle.js:4880:35
at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:6476:35)
at Object.onInvokeTask (http://localhost:4200/vendor.bundle.js:28119:37)
at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:6475:40)
at Zone.runTask (http://localhost:4200/polyfills.bundle.js:6352:47)
at ZoneTask.invoke (http://localhost:4200/polyfills.bundle.js:6546:33)
at data.args.(anonymous function) (http://localhost:4200/polyfills.bundle.js:7577:25)
ErrorHandler.handleError @ error_handler.js:60
next @ application_ref.js:348
schedulerFn @ async.js:93
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:79
NgZone.triggerError @ ng_zone.js:331
onHandleError @ ng_zone.js:292
ZoneDelegate.handleError @ zone.js:246
Zone.runTask @ zone.js:154
ZoneTask.invoke @ zone.js:345
data.args.(anonymous function) @ zone.js:1376
Subscriber.js:227 Uncaught TypeError: Cannot read property 'forEach' of undefined
at http://localhost:4200/main.bundle.js:4880:35
at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:6476:35)
at Object.onInvokeTask (http://localhost:4200/vendor.bundle.js:28119:37)
at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:6475:40)
at Zone.runTask (http://localhost:4200/polyfills.bundle.js:6352:47)
at ZoneTask.invoke (http://localhost:4200/polyfills.bundle.js:6546:33)
at data.args.(anonymous function) (http://localhost:4200/polyfills.bundle.js:7577:25)
(anonymous) @ gantt.component.ts:51
ZoneDelegate.invokeTask @ zone.js:275
onInvokeTask @ ng_zone.js:262
ZoneDelegate.invokeTask @ zone.js:274
Zone.runTask @ zone.js:151
ZoneTask.invoke @ zone.js:345
data.args.(anonymous function) @ zone.js:1376
While I imported under the SharedModule, it said following issues.
ERROR Error: Uncaught (in promise): Error:
Application called PerfectScrollbarModule.forRoot() twice.
For submodules use PerfectScrollbarModule.forChild() instead.
Any solution to avoid this?
Regards
<perfect-scrollbar [config]="{handlers: ['click-rail', 'drag-scrollbar', 'wheel', 'touch']}" class="pipeline-workspace" rpNodeDroppable>
I can still use the keyboard keys in IE edge v14. Chrome works fine :(
Could you please add a method similar to the scrollTo(position) in the directive and the component. Something along the lines of the below, this way we can scroll to specific position programmatically as well..
for the directive ->
PerfectScrollbarDirective.prototype.scrollToLeft = function (position) { this.elementRef.nativeElement.scrollLeft = position; this.update(); };
for the component ->
PerfectScrollbarComponent.prototype.scrollToLeft = function (position) { this.elementRef.nativeElement.scrollLeft = position; this.update(); };
Any plans to update the peerdependencies to Angular 4?
I get build / compile errors when using your library with Angular 4.
when the content that is in 'perfect-scrollbar' is just one column, but scrollbar is also exist? Can not hidden scrollbar in that case? the ngx-perfect-scrollbar demo is also like that.
Is it possible to override scrollbar theme f.e(theme example 2 from perfect-scrollbar doc)?
README currently refers to an earlier version of the perfect-scrollbar css (0.6.15).
Difference is that v0.7.x (current) uses .ps
and not .ps-container
anymore, resulting in no selector classes being styled.
Bug
Application should compile with Ahead-of-time compilation
Failed in compile time with error:
Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function
Try to run AOT using official guide
Without that fix we cannot use that awesome library
angular2-perfect-scrollbar - 1.0.0
@angular\core - 2.1.2
@angular\compiler-cli - 2.1.2
typescript - 2.0.8
is there any way to add scroll to textarea? i try using directive but height is not added on ps-scrollbar-y-rail tag.
##Thte title says it all. In my app, i have the perfect scrollbar module imported and declared in my layout.module.ts :
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
import { MaterialModule } from '@angular/material';
import { LayoutRoutingModule } from './layout-routing.module';
import { LayoutComponent } from './layout.component';
import { HeaderComponent, SidebarComponent, SidenavComponent, HamburgerComponent, } from '../shared';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
suppressScrollX: true
};
@NgModule({
imports: [
CommonModule,
NgbDropdownModule.forRoot(),
MaterialModule,
PerfectScrollbarModule.forRoot(PERFECT_SCROLLBAR_CONFIG),
LayoutRoutingModule,
],
declarations: [
LayoutComponent,
HeaderComponent,
SidebarComponent,
SidenavComponent,
HamburgerComponent,
]
})
export class LayoutModule { }
it works perfectly when i call it from layout.component.ts. However when i try using the directive in a child component, let's say user-profile.ts, an error tells me that [perfect-scrollbar] is not a known element. If i try importing the PS module again in my submodule or subcomponent, i also get errors. Iam probably doing something wrong, anyone could help me figure it out ?
Hi
I am trying to use this in my ng2 app but when I add "PerfectScrollbarModule.forRoot(PERFECT_SCROLLBAR_CONFIG)" into my NgModule imports it throws below exception. If i remove this from import app works fine.
(index):72 Error: (SystemJS) Unexpected token <
SyntaxError: Unexpected token <
at eval ()
at Object.eval (localhost:52432/app/app.module.js:23:36)
at eval (localhost:52432/app/app.module.js:49:4)
at eval (localhost:52432/app/app.module.js:50:3)
Evaluating localhost:52432/angular2-perfect-scrollbar
Evaluating localhost:52432/app/app.module.js
Evaluating localhost:52432/app/main.js
Error loading localhost:52432/app/main.js
at eval ()
at Object.eval localhost:52432/app/app.module.js:23:36)
at eval (localhost:52432/app/app.module.js:49:4)
at eval (localhost:52432/app/app.module.js:50:3)
Evaluating localhost:52432/angular2-perfect-scrollbar
Evaluating localhost:52432/app/app.module.js
Evaluating localhost:52432/app/main.js
Error loading localhost:52432/app/main.js
Could you please help me identifying the issue.
Thanks
Hi, can you help me? Is it possible to make the scroll bar starts at the bottom? I'm trying to create a chat application, and I want that all the new messages are added at the bottom, so I need to make scroll bar start at the bottom. How do I make it?
Thank You in Advance.
Hi
I want to update the scroll position from top when i show hide a component/div in angular 2.
I tried to this way, which did not worked.
@ViewChild('messagesContainer') messagesContainer: ElementRef;
this.messagesContainer.elementRef.nativeElement.scrollTop = 170;
Is there any update for this.
Regards
Kailash
if i m trying to update scroller manually i.e. calling update method , it doesn't refresh handle bar width automatically.
I need to click on scrollbar handle to update its correct length.
can you give example how to use MutationObserver to call update method?
i am using Ng2 with typescript.
thanks
hardev
First of all, thanks for a great and so useful library @sconix
I am trying to add settings dynamically - setting supressScrollY based on a constant. It looks like this:
<perfect-scrollbar class="flex-item-elastic container" [config]="{suppressScrollY: !isWidget}">
<router-outlet></router-outlet>
</perfect-scrollbar>
Though the constant changes, the config doesn't seem to take effect. I've also tried using a method call (suppressScrollY: disableYScroll()
) - also without any effect, the method gets called though.
Any ideas how to achieve the desired effect?
Thanks a lot
Can't use it in an lazy loaded module, since it's not allowed to put PerfectScrollbarModule
in a SharedModule and if I import it in the AppModule, the element perfect-scrollbar
isn't a known element.
I'm using the scrollTo method in my project but the scrolling is a bit to 'instantaneous' for my usecase.
Would I be possible to add a scrollSpeed to the scrollTo method? Or should I implement that outside the perfect-scrollbar.
build has many errors... this is my working tsconfig.json:
{
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "commonjs",
"moduleResolution": "node",
"outDir": "./dist",
"sourceMap": true,
"target": "es6",
"lib": ["dom", "es6"],
"typeRoots": [
"../node_modules/@types"
],
"types": [
"node"
],
"exclude": [
"node_modules",
"../node_modules",
"../dist"
]
},
"awesomeTypescriptLoaderOptions": {
"useWebpackText": true
}
}
see http://blog.mgechev.com/2016/03/28/ambient-type-definitions-duplicate-identifier-typescript-fix/
also remove >/dev/null
from package.json build command - its not cross platform compatible
It will be great if there is a way to use ngx-perfect-scrollbar as a polyfill for browser that doesn't support custom scrollbar. May be add a polyfill property in the config object? Or you can let us(developers) do the browser support checking task and pass a boolean property to disable the scrollbar for supported browsers?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.