Question

我正在使用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，不同的时间来调用哪个等等），我肯定会卡住。感谢任何帮助，谢谢！

Answer 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();
    }
});

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

jQuery工具提示中的自定义jQuery滚动条

1 个答案: