1

为什么slimScroll插件没有在 bootstrap popover 中初始化？

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

首先，我试图在多个弹出窗口上初始化它。然后我尝试只制作一个弹出框并在其上初始化 slimScroll。没有机会

这就是我启动弹出框的方式：

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

这里是我的 slimScroll 插件。

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

我也尝试使用 .popover 选择器。

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

4

2 回答 2

1

我不明白你为什么将高度设置为 100%。我根本不希望滚动条具有 100% 的高度。

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

弹出框没有 onshow 的回调，但您可以添加一个，请参阅：使用 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);更苗条的功能，您可以滚动到内容的末尾。

于 2013-06-29T22:16:47.287 回答
0

解决方案很简单（：

$('[data-toggle="popover"]').on('shown.bs.popover', function () {
     $('.scrollit').slimScroll({
        height: '100px'
    });
});
于 2016-04-10T13:18:11.860 回答