Tinyscrollbar 在 SimpleModal 中隐藏内容答案

【问题标题】：Tinyscrollbar Hiding Content inside SimpleModalTinyscrollbar 在 SimpleModal 中隐藏内容
【发布时间】：2014-10-15 23:20:30
【问题描述】：

每当我启动新模式 (SimpleModal) 并使用 (Tinyscrollbar) 滚动内容时，我都会遇到问题，因为滚动条似乎隐藏了我内容的第一个项目符号（红色错误消息）。请看下面的小提琴，点击打开模态然后抓住滚动条，向下移动然后向上移动可以看到隐藏的子弹。

我猜它可能这样做的唯一原因是，每当模态弹出时高度会发生变化，这就是为什么我读取模态容器的高度并用它来定义“视口”然后我运行了一个 tinyscrollbar_update( ) 无济于事。

我的 JS：

$(document).ready(function(e) {
// Remove Order (from cart) Modal
$('.btn_remove_order').click(function() {
    $(".modalMultiAlert").modal({
        opacity: 60,
        overlayCss: { height: "200px" },
        minHeight: 200,
        maxHeight: 800,
        onShow: function() {
            var heightscroll = $('.simplemodal-container').height();
            $('.viewport').css('height', heightscroll);              
            var scrollbar = $('#scrollbar_container');
            scrollbar.tinyscrollbar();
            scrollbar.tinyscrollbar_update();
        },
        close: false
    });
});

});

HTML 和 CSS 可以在 Fiddle 中看到：

http://jsfiddle.net/cd80cpan/6/

感谢您的帮助！

【问题讨论】：

标签： jquery html css simplemodal

【解决方案1】：

找到了解决办法！我只是制作了 Tinyscrollbar 容器的副本（.clone），然后在同一个容器上执行了 .replaceWith，然后从那里绑定 Tinyscrollbar，请参见代码；

    var $scrollbar = $('#scrollbar_container');
    // Let's make a copy of the Scrollbar Container
    var $modalCopy = $scrollbar.clone();
    // Remove Order (from cart) Modal
    $('.btn_remove_order').click(function() {
        $(".modalMultiAlert").modal({
            opacity: 60,
            minHeight: 200,
            maxHeight: 800,
            onShow: function() {
                // Replace the Scrollbar container after the Modal has loaded with Copy
                $scrollbar.replaceWith($modalCopy);
                // Determine height of the Modal
                var $heightscroll = $('.simplemodal-container').height();
                // Change the viewport height based on Modal height
                $('.viewport').css('height', $heightscroll);       
                // Initialize Tinyscrollbar       
                $modalCopy.tinyscrollbar();
            },
            close: false
        });
    });

【讨论】：