0

我正在使用 nanoscroller.js 和 tiptip.js ，尽管对于我的问题，我不确定特定的库有那么重要（但它们可能）。

我有一个工作工具提示，我有一个工作滚动条。单独使用时。

我的目标是在工具提示中有一个有效的自定义滚动条。

HTML：

<a class="tooltip">Open tooltip</a>

<div class="tooltip-html" style="display:none;">
    <div id="main-content" class="nano">
        <div class="Content">
            <div class="blue">
            </div>
        </div>
    </div>
</div>

JS：

var tip_html = $('.tooltip-html').html();
$('.tooltip').tipTip({activation: 'click', maxWidth: "230px", defaultPosition: "bottom", keepAlive: true, content: tip_html });
$("#main-content.nano").nanoScroller();

关于上述内容，我注意到的第一件事是：通过这种安排，纳米卷轴仅应用于第一组 html，而不是工具提示中的那组。

因此，我在抓取 html 并将其添加到工具提示之前先应用了滚动条，这将滚动条应用到了工具提示，但它不起作用。

在这里尝试了很多不同的方法（将滚动条应用于每个匹配的 id，何时调用哪个的不同顺序等），我肯定被卡住了。任何帮助表示赞赏，谢谢！

4

1 回答 1

1

在没有使用这些库的情况下，我的猜测是tiptip 所做的是创建DOM 节点的副本，并且nanoScroller 保存了对应用它的节点的一些引用。

结合起来，这两种行为可能会导致您所看到的： $(#mail-content.nano) 将始终指向原始 HTML，如果您在添加滚动条后复制 HTML，滚动条可能仍在尝试滚动原始节点。

因此，您可能想在创建tipTip 后尝试添加nanoScroller。像这样的东西（未经测试）：

var tip_html = $('.tooltip-html').html();
$('.tooltip').tipTip({
    activation: 'click',
    maxWidth: "230px",
    defaultPosition: "bottom",
    keepAlive: true,
    content: tip_html,
    enter: function () {
        $(this).find("div.nano").nanoScroller();
    }
});

这使用entertipTip 的属性添加一个在打开提示时执行的函数，然后将nanoScroller 添加到新的DOM 元素中。

于 2012-04-23T11:24:44.923 回答