2016-04-29 105 views
7

我使用Perfect Scrollbar然後我開始使用Angular 2,但是我找不到類似的添加。在Angular 2項目中實現完美滾動條的正確方法是什麼?Angular2可滾動內容

我跟着this great example,但我有點丟失如何ngOnInit()

jQuery(this.elementRef.nativeElement).draggable({containment:'#draggable-parent'}); 

更改此設置=>

$(function() { 
    $('#Demo').perfectScrollbar(); 

回答

6

你可以用香草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://plnkr.co/edit/S8DJpHFVNFioklTl1xg6?p=preview

+1

你好,我嘗試過,但它是說完美,滾動條沒有默認出口 – axcl

+0

您可以編寫完美的類型定義文件滾動條或者你可以使用[Angular2-drag-scroll](https://github.com/bfwg/angular2-drag-scroll)這是一個Angular2庫來拖動內容滾動。 –

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> 

我申請「拖拽滾動」到div所以一切都在這個div的方將 拖動的並具有屬性溢出:滾動等。

將「drag-scroll-y-disabled」設置爲true將禁用y軸滾動/拖動。

將「scrollbar-hidden」設置爲true會隱藏滾動條。

Scroll

Github上頁:https://github.com/bfwg/angular2-drag-scroll

演示站點:https://bfwg.github.io/angular2-drag-scroll/

+0

這是棄用角4 4. –

+1

@KrishnaKarki最新版本與Angular 4兼容。 –