Question

为什么slimScroll插件没有在bootstrap popover中启动？

我尝试了不同的选择器（popover中的所有选择器），但它不会工作。

首先，我试图在多个弹出窗口上初始化它。然后我试着只制作一个popover并启动slimScroll就可以了。没机会

这就是我启动popover的方式：

jQuery("#bar-notifications").popover({ animation:true, placement: 'bottom', title: 'Notifications!', content: joint, html: true });

这里是我的slimScroll插件。

        jQuery(".popover .popover-content").slimScroll({
            height: '100%'
        });

我也尝试过.popover选择器。

也许有很好的答案为什么他们不能一起工作？

Answer 1

我不明白你为什么把这个高度设定为100％。我不指望高度为100％的滚动条。

您不能对不存在的元素应用slimScroll（）。在弹出窗口显示之前，您的.popover-content不存在。

popover没有针对onshow的回调，但您可以添加一个，请参阅：Callback function after tooltip / popover is created with twitter bootstrap?。

<script>

function joint()
{
    return $('.scrollit').html();
}   
//from: https://stackoverflow.com/questions/14694930/callback-function-after-tooltip-popover-is-created-with-twitter-bootstrap

var tmp = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function () {
  tmp.call(this);
  if (this.options.callback) {
    this.options.callback();
  }
}
function slimmer()
{
    $('.popover-content').slimScroll({
        height: '100px'
    });
    $('.popover-content').css('padding-bottom',0);
}       

$(function(){
    $('.scrollit').slimScroll({
        height: '100px'
    });

    $("#popovercontent").popover({ callback: slimmer ,animation:true, placement: 'bottom', title: 'Notifications!', content: joint, html: true });



});
</script>

当弹出窗口显示slimmer()时，立即调用。 Slimmer（）将slimScroll添加到内容中。这似乎有效：http://bootply.com/66056。 ~~出于某种原因，你不能直接听到内容的结尾（也许会问Rochal）。~~ 更新：通过添加$('.popover-content').css('padding-bottom',0);来更轻薄的功能，您可以滚动到内容的结尾。

Answer 2

解决方案很简单（：

Received Ticks are: 380 and nodeID is: 1

slimScroll与Twitter的Bootstrap 2.x弹出窗口

2 个答案: