我使用Perfect Scrollbar然后我开始使用Angular 2,但我找不到类似的添加。在Angular 2项目中实现完美滚动条的正确方法是什么?
我跟着this great example,但我很遗憾如何改变ngOnInit()
jQuery(this.elementRef.nativeElement).draggable({containment:'#draggable-parent'});
到此=>
$(function() {
$('#Demo').perfectScrollbar();
答案 0 :(得分:6)
您可以使用vanilla js在自定义指令中初始化完美滚动条(因为它支持它;-)),如下所示:
import Ps from 'perfect-scrollable';
@Directive({
selector: '[ps]'
})
export class PsDirective {
constructor(private elementRef:ElementRef) {
}
ngAfterViewInit() {
Ps.initialize(this.elementRef.nativeElement);
}
}
您可以像这样使用/应用:
@Component({
selector: 'app'
template: `
<div ps class="container">
<div class="content"></div>
</div>
`,
styles: [`
.content {
background-image: url('https://noraesae.github.io/perfect-scrollbar/azusa.jpg');
width: 1280px;
height: 720px;
}
.container {
position: relative;
margin: 0px auto;
padding: 0px;
width: 600px;
height: 400px;
}
`],
directives: [ PsDirective ]
})
export class App {
}
必须在此之前配置库(css和SystemJS):
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.11/css/perfect-scrollbar.min.css"/>
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
map: {
'perfect-scrollable': 'https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.11/js/min/perfect-scrollbar.min.js'
},
packages: {
'app': {
defaultExtension: 'ts'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
请参阅此plunkr:https://github.com/whipsterCZ/laravel-ajax。
答案 1 :(得分:0)
Angular2-drag-scroll是您正在寻找的图书馆
用法示例:
<style>
.demo-one {
height: 260px;
background-color: #FFFFFF;
}
</style>
<div drag-scroll drag-scroll-y-disabled="true" scrollbar-hidden="true" >
<img *ngFor="let image of imagelist" [src]="'assets/img/' + image" />
</div>
我正在应用&#34;拖动滚动&#34;到div,所以这个div的一面都是 draggable并具有属性overflow:scroll等。
设置&#34;拖动滚动y禁用&#34;为true将禁用y轴滚动/拖动。
设置&#34;滚动条隐藏&#34;为true将隐藏滚动条。