Contenuto scrollabile angolare2

Question

Ho utilizzato Perfect Scrollbar e quindi ho iniziato a utilizzare Angular 2, ma non riesco a trovare l'aggiunta simile. Quale sarebbe il modo corretto di implementare la barra di scorrimento perfetta nel progetto Angular 2?

ho seguito this great example ma io sono tipo un perduto come cambiare in ngOnInit()

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

a questo =>

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

Answer 1

Si potrebbe inizializzare perfetta barra di scorrimento all'interno di una direttiva personalizzato con js vaniglia (dal -)) in questo modo:

import Ps from 'perfect-scrollable'; 

@Directive({ 
    selector: '[ps]' 
}) 
export class PsDirective { 
    constructor(private elementRef:ElementRef) { 
    } 

    ngAfterViewInit() { 
    Ps.initialize(this.elementRef.nativeElement); 
    } 
} 

È possibile utilizzare/applicare in questo modo:

@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 { 
} 

La biblioteca deve essere stato configurato prima di questo modo (css e 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> 

Vai a questa plunkr: https://plnkr.co/edit/S8DJpHFVNFioklTl1xg6?p=preview.

Answer 2

Angular2-drag-scroll è la libreria che si sta cercando

esempio

Usage:

<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> 

sto applicando "drag-scroll" al div quindi tutto nel lato di questo div sarà trascinabili e ha l'overflow dell'attributo: scroll ecc.

L'impostazione "trascina-scorri-y-disattiva" su true disabiliterà lo scorrimento/trascinamento dell'asse y.

L'impostazione "scrollbar-hidden" su true nasconde la barra di scorrimento. Pagina

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

demo: https://bfwg.github.io/angular2-drag-scroll/