[英]Angular2 scrollable content
I used Perfect Scrollbar and then I started using Angular 2, but I cannot find the similar addition. 我使用Perfect Scrollbar ,然后我开始使用Angular 2,但我找不到类似的添加。 What would be correct way to implement perfect scrollbar in Angular 2 project? 在Angular 2项目中实现完美滚动条的正确方法是什么?
I followed this great example but I am kind a lost how to change in ngOnInit()
我遵循了这个很好的例子,但我很ngOnInit()
如何改变ngOnInit()
jQuery(this.elementRef.nativeElement).draggable({containment:'#draggable-parent'});
to this=> 对此=>
$(function() {
$('#Demo').perfectScrollbar();
You could initialize perfect scrollbar within a custom directive with vanilla js (since it supports it ;-)) like this: 您可以使用vanilla js在自定义指令中初始化完美的滚动条(因为它支持它;-)),如下所示:
import Ps from 'perfect-scrollable';
@Directive({
selector: '[ps]'
})
export class PsDirective {
constructor(private elementRef:ElementRef) {
}
ngAfterViewInit() {
Ps.initialize(this.elementRef.nativeElement);
}
}
You can use / apply it like this: 您可以像这样使用/应用它:
@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 {
}
The library must have been configured before this way (css and SystemJS): 必须在此之前配置库(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>
See this plunkr: https://plnkr.co/edit/S8DJpHFVNFioklTl1xg6?p=preview . 请参阅此plunkr: https ://plnkr.co/edit/S8DJpHFVNFioklTl1xg6 ? p = preview。
Angular2-drag-scroll is the library you are looking Angular2-drag-scroll是您正在寻找的库
Usage example: 用法示例:
<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>
I'm applying "drag-scroll" to the div so everything in side of this div will be draggable and has the attribute overflow: scroll etc. 我正在将“拖动滚动”应用于div,因此这个div中的所有内容都可以拖动并具有属性溢出:滚动等。
Setting "drag-scroll-y-disabled" to true will disable y-axis scrolling/dragging. 将“drag-scroll-y-disabled”设置为true将禁用y轴滚动/拖动。
Setting "scrollbar-hidden" to true will hide the scroll bar. 将“scrollbar-hidden”设置为true将隐藏滚动条。
Github page: https://github.com/bfwg/angular2-drag-scroll Github页面: https : //github.com/bfwg/angular2-drag-scroll
demo site: https://bfwg.github.io/angular2-drag-scroll/ 演示站点: https : //bfwg.github.io/angular2-drag-scroll/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.