Question

每当我启动一个新模式（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：

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

感谢您的帮助！

Answer 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
        });
    });

Tinyscrollbar隐藏SimpleModal中的内容

1 个答案: