标签: perfect-scrollbar

我正在使用此插件来更改滚动条的方面.

尽管所有的尝试,我都无法正常工作,事实上如果我在iFrame上方滚动页面,滚动不起作用,你可以在这个片段中看到:

$('.modal-container').perfectScrollbar();

.row-body {
    overflow: hidden;
    padding: 0;
}
.row-body, .row-page {
    box-sizing: border-box;
    border-bottom: 0;
    width: 100%;
    margin: 0 auto;
}
.row-body .twelve {
    width: 100%;
    height:100vh;
}
.body-content {
    background: #191919;
    overflow: hidden;
    padding-bottom: 30px;
}
.udoplus {
    position: relative;
    z-index: 11;
    height: 180px;
}
.column, .columns {
    float: left;
    min-height: 1px;
    position: relative;
}
.event-video, .event-music {
    width: 80%;
    margin: 0 auto;
}
#yt-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
} …

文档在这里不是很有帮助。我想在我的应用程序中使用完美的滚动条，这样我就可以绕过与所有浏览器的兼容性问题。我完全按照这里的描述初始化了我的代码https://github.com/zefoy/ngx-perfect-scrollbar/tree/4.xx/。这就是我在我的 html 中所做的

<perfect-scrollbar id="chat" [config]="config"> <li *ngFor="let message of messages"> {{messages}} <li> </perfect-scrollbar>

现在对于每条新消息，我希望容器自动滚动到最新消息。进一步阅读文档，我发现有调用事件的指令。这在我之前链接的文档末尾进行了描述。所以我的方法在同一个组件中如下：

import {PerfectScrollbarComponent } from 'ngx-perfect-scrollbar';
...

constructor(private scrollbar:PerfectScrollbarComponent) { }
...

  ngDoCheck() {
    var chat = document.getElementById('chat');
    this.scrollbar.directiveRef.scrollToBottom(chat.scrollHeight);
  }

这给了我一个错误，因为它期望 PerfectScrollbarComponent 是一个提供者。执行此操作后，我收到另一个错误 No provider for ElementRef!。

我为此失眠了。任何人都可以就如何在角度 4 中使用完美滚动条实现自动滚动提出建议吗？先感谢您

我使用Perfect Scrollbar,然后我开始使用Angular 2,但我找不到类似的添加.在Angular 2项目中实现完美滚动条的正确方法是什么？

我遵循了这个伟大的例子,但我很遗憾如何改变ngOnInit()

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

对此=>

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

我正在尝试使用以下库向我的 Angular 应用程序添加样式滚动条：https : //github.com/zefoy/ngx-perfect-scrollbar

我遵循该链接中的文档并将导入添加到我的 app.module.ts 文件中，但是在尝试使用它时我不断收到错误消息。

我还尝试将 PerfectScrollbarModule 和 PerfectScrollbarConfigInterface 导入到我正在使用它的组件中，但仍然没有运气。

我尝试了以下所有 HTML，但它们导致了相应的错误消息。我错过了什么？顺便说一下，我使用的是最新版本的 Angular。

<perfect-scrollbar class="container" [config]="config">
  <div class="content">Scrollable content</div>
</perfect-scrollbar>

无法绑定到 'config'，因为它不是 'perfect-scrollbar' 的已知属性。

<perfect-scrollbar class="container">
  <div class="content">Scrollable content</div>
</perfect-scrollbar>

“完美滚动条”不是已知元素：

<div [perfect-scrollbar]="config">
    ...
</div

无法绑定到“完美滚动条”，因为它不是“div”的已知属性

更新：

我添加ngx-perfect-scrollbar': 'npm:ngx-perfect-scrollbar'到地图对象的是我的 systemjs 文件，并将以下内容添加到包对象中：

'ngx-perfect-scrollbar': {
    main: 'bundles/ngx-perfect-scrollbar.umd.js',
    defaultExtension: 'js'
  }

这是我的app.module.ts文件的相关部分：

import { PerfectScrollbarModule }          from 'ngx-perfect-scrollbar';
import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';

export const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
  suppressScrollX: true
};

@NgModule({ 
    imports: …

我正在使用完美滚动插件

https://github.com/noraesae/perfect-scrollbar

当我使用ps-y-reach-end活动时

document.addEventListener('ps-y-reach-end', (event)=> {
   console.log('Why this is printing multiple times when I reach Bottom, I wanted it to be single fire')
 });

问题在于，当滚动到达容器底部时，事件会触发多次。

JSFiddle演示

Web控制台打印：

请将y轴滚动到底部，您将多次看到控制台

我想在 mat-autocomplete 元素上添加完美的滚动条。是否可以在角度材质元素上添加 ngx 完美滚动条？

在将完美滚动条height应用于动态应用的容器时，我遇到了一个独特的情况。

即使在到达末尾并wheelPropagation设置为 时，滚动也会向下滚动容器false。

JsFiddle 链接

注意：此问题只能在 Firefox 浏览器中重现。它在 Chrome 中完美运行。

我在 React js 上的服务器启动时收到此错误。

错误：没有指定元素来初始化 PerfectScrollbar

不过，它在朋友的 MAC 操作系统上运行良好。我正在使用Windows。

我正在使用这个版本：“perfect-scrollbar”：“^1.4.0”，

我正在尝试完美的滚动条。滚动条工作正常...当内容超出时它开始显示滚动条。...但！当内容被删除到小于 div 的高度时，我希望滚动条消失。它不是。仅当拖动器向上移动或单击拖动器上方的导轨后才会出现。

要让滚动条在删除内容后立即消失，是否需要使用事件处理程序并在 Javascript 中以编程方式完成？我本以为这是默认行为。代码中没有什么可显示的，但这是我初始化它的方法：

  const ps = new PerfectScrollbar('#editDiv', {
                    maxScrollbarLength: 60,
                    minScrollbarLength: 30
              });

我最初更改了 CSS 来改变滚动条的宽度并更改颜色。为了确定这一点，我以零更改重新安装了 CSS，只是为了检查此行为。而且还是一样。

编辑：尝试使用浏览器的默认滚动条。一旦内容被删除到小于 div 的高度，滚动条就会消失。

我正在尝试使用以下方法创建“完美滚动条”：

https://noraesae.github.io/perfect-scrollbar/

用最简单的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<link rel="stylesheet" href="/css/perfect-scrollbar.css" />
<script src="/js/perfect-scrollbar.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $("#msgid").html("This is Hello World by JQuery.");
    $('#msgid').perfectScrollbar();
});
</script>

<div id="msgid"></div>

我有以下错误：

TypeError：$（...）。perfectScrollbar不是函数

当然，每个js / css都指向正确的方向，如果需要，您可以在此处看到它：

http://florida.red111.net/a.html

看起来jQuery无法识别该库，

有任何想法吗？

提前致谢。