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

Custom jQuery scrollbar inside jQuery tooltip

本文关键字：jQuery 滚动条 自定义 工具提示      更新时间：2023-09-26

我正在使用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();

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

所以我先应用滚动条，然后再抓取 html 并将其添加到工具提示，这会将滚动条应用于工具提示，但它不起作用。

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

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

这两种

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

因此，您可能需要在创建提示后尝试添加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 元素中。

相关文章：