1

高さが動的に設定されるウィジェットがあります。ただし、ウィジェット コンテナーの高さが変更されても、スクロールバーの高さは更新されないようです。また、ウィジェットの一番下までスクロールすると、余分な空白が表示されます。ウィジェットもレスポンシブなので、デスクトップ ビューでは右側に配置され、モバイル ビューポートでは下部にドッキングされます。

$('.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();
    });
4

1 に答える 1

0

高さが変更された後、tinyscrollbar インスタンスで update メソッドを呼び出す必要があります。

于 2016-06-22T11:35:57.023 に答える