Tinyscrollbar高度未更新



我有一个小部件,它的高度是动态设置的。然而,当小部件容器的高度发生变化时,滚动条的高度似乎不会更新。当我滚动到小部件的底部时,会出现额外的空白。该小部件也具有响应性,因此在桌面视图中,它位于右侧,在移动视口中,它停靠在底部。

$('.isi-widget').tinyscrollbar({ thumbSize: 50 });
    $('.scrollbar').fadeOut();
    $('.isi-widget').hover(
        function(){
            $('.scrollbar').fadeIn();
        },
        function(){
            $('.scrollbar').fadeOut();
        }
    );
    function pinnedIsi(){
        $('.isi-widget').css({
            height: '200px',
            top: 'inherit'
        });
        $('.isi-toggle-btn').addClass('pinned');
        $('.isi-toggle-btn').removeClass('unpinned');
        $('.isi-toggle-btn').html('+');
    }
    function unpinnedIsi(){
        $('.isi-widget').css({
            height: 'calc(100% - '+ $('header').height() +'px)',
            top: $('header').height() + 'px'
        });
        $('.isi-toggle-btn').addClass('unpinned');
        $('.isi-toggle-btn').removeClass('pinned');
        $('.isi-toggle-btn').html('–'); 
    }
    function sidebarIsi(){
        $('.isi-widget').css({
            height: 'calc(100% - '+ $('header').height() +'px)',
            top: $('header').height() + 'px'
        });
        $('.isi-toggle-btn').removeClass('pinned');
        $('.isi-toggle-btn').removeClass('unpinned');
    }
    $('.isi-toggle-btn').click(function(){
        if ($('.isi-toggle-btn').hasClass('unpinned')){
            console.log('pin');
            pinnedIsi();
        } else {
            console.log('unpin');
            unpinnedIsi();
        }
    });
    function toggleIsi(){
        if ($(window).width() <= 1023) {
            pinnedIsi();
        } else {
            sidebarIsi();
        }
    }
    toggleIsi();
    $(window).resize(function(){
        toggleIsi();
    });

在高度更改后,您应该在tinyscrollbar实例上调用update方法。

最新更新