[英]Custom jQuery scrollbar inside jQuery tooltip
I'm using nanoscroller.js and tiptip.js , although for my question I'm not sure specific libraries matter that much (but they may). 我正在使用nanoscroller.js和tiptip.js,尽管对于我的问题,我不确定特定的库是否有那么大的影响(但它们可能会)。
I have a working tool tip, I have a working scrollbar. 我有一个工作工具提示,有一个工作滚动条。 When used seperately.
分开使用时。
My goal is to have a working custom scrollbar inside the tooltip. 我的目标是在工具提示中有一个可正常工作的自定义滚动条。
HTML: 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: JS:
var tip_html = $('.tooltip-html').html();
$('.tooltip').tipTip({activation: 'click', maxWidth: "230px", defaultPosition: "bottom", keepAlive: true, content: tip_html });
$("#main-content.nano").nanoScroller();
First thing I noticed about the above: With this arrangement the nanoscroller was only applied to the first set of html, not the set that is in the tooltip. 关于以上内容,我注意到的第一件事:通过这种安排,nanoscroller仅应用于第一组html,而不应用于工具提示中的那一组。
So I then applied the scrollbar first before grabbing the html and adding it to the tooltip, this applied the scrollbar to the tooltip but it wasn't functional. 因此,在抓取html并将其添加到工具提示之前,我先应用了滚动条,这将滚动条应用到了工具提示,但没有作用。
Tried a lot of different approaches here (applying the scrollbar to every id that matched, different order of when to call which, etc), and I'm definitely stuck. 在这里尝试了许多不同的方法(将滚动条应用于匹配的每个ID,何时调用哪个ID的顺序不同等等),我肯定会陷入困境。 Any help is appreciated, thanks!
任何帮助表示赞赏,谢谢!
Without having used either of those libraries, my guess is that what tiptip does is create a copy of the DOM node, and that nanoScroller saves some reference to the node to which it is applied. 在没有使用任何一个库的情况下,我的猜测是,技巧是创建DOM节点的副本,而nanoScroller会保存对要应用该节点的节点的一些引用。
Combined, these these two behaviors could cause what you're seeing: $(#mail-content.nano) will always point to the original HTML, and if you copy the HTML after adding the scroller, the scrollbar may still be trying to scroll the original node. 结合这两种行为,可能会导致您看到以下内容:$(#mail-content.nano)将始终指向原始HTML,并且如果在添加滚动条后复制HTML,则滚动条可能仍在尝试滚动原始节点。
Therefore, you may want to try adding nanoScroller after the tipTip is created. 因此,您可能要在创建tipTip之后尝试添加nanoScroller。 Something like this (untested):
像这样(未经测试):
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();
}
});
This uses the enter
property of tipTip to add a function that's executed when the tip is opened, which then adds the nanoScroller to the new DOM elements. 这使用tipTip的
enter
属性来添加一个在打开尖端时执行的函数,然后将nanoScroller添加到新的DOM元素中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.