Polymer Shadow DOM 中的 JavaScript 插件初始化

标签 javascript html css polymer web-component

我尝试使用 this plugin使用 Polymer,但没有用。我使用此插件的 Javascript 版本。我还使用了 domReady: function{}。问题是什么?

影子 DOM:

    <link rel="import" href="../../bower_components/polymer/polymer.html">
<script src="../../assets/plugins/perfect-scrollbar/js/perfect-scrollbar.js"></script>
<polymer-element name="paper-scrollbar">
    <template>
        <!-- begin element CSS -->
        <link rel="stylesheet" href="../../assets/plugins/perfect-scrollbar/css/perfect-scrollbar.css">
        <style>
            .scrollbar-container {
                width: 100%;
                height: 100%;
                overflow: auto;
                position: relative;
                margin: 0;
            }
        </style>
        <!-- end element CSS-->
        <!-- begin element HTML -->
        <div class="scrollbar-container">
            <content></content>
        </div>
        <!-- end element HTML -->
    </template>
    <!-- begin element JavaScript -->
    <script>
        Polymer('paper-scrollbar', {
            ready: function () {
                var container = document.querySelector('.scrollbar-container');

                Ps.initialize(container);
            }
        });
    </script>
    <!-- end element JavaScript -->
</polymer-element>

最佳答案

问题出在插件中。它不适用于同一类下的元素范围。您应该为每个 DOM 元素使用唯一的 ID。

关于Polymer Shadow DOM 中的 JavaScript 插件初始化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29864288/

相关文章:

css - 强元素变为斜体

css - float 页脚问题

javascript - 如何处理 html5 中的向导进度条?

javascript - 使用 react-router-redux 时未定义 this.props.children

javascript - 使用 PHP 在升序和降序日期之间切换 onclick

javascript - 是否可以扭曲进度条的开头?

html - 这个颜色代码(#fff3f3f3)和(#ffffff)有什么区别,第一个是 8 个字符,第二个是 6 个字符?

css - 在响应式流动的网站线框上将父项中的子项居中

Javascript 文件在 ajax 导航中出现重复

ios - 保护来自 iOS 应用程序的 API 调用