javascript - ウィンドウのサイズ変更時にスクローラーがアクティブにならない

Question

jquery ui から適応した js 水平スクローラーに実際の問題があります。

最初の 3 つのスクローラーは機能しますが、ウィンドウのサイズを変更すると、4 番目にスクローラーが表示されますが、ページを更新しない限り機能しません。ページのサイズが変更されたときにそれを機能させるにはどうすればよいですか?

これは問題のページのスクリーンショットですここに画像の説明を入力

ご覧のとおり、4 つの列と、右側にスクローラーがある 3 つとない 1 つの列があります。
ページの高さのサイズを変更すると、4 列目にスクローラーが表示されますが、機能しません。サイズ変更されたページが更新されたときにのみ機能します

ここに画像の説明を入力

ページのサイズが変更されたときにそれを機能させるにはどうすればよいですか?

ここに私のhtmlがあります

<div style="position:relative; overflow:hidden;">
<div id="ib-main-wrapper" class="ib-main-wrapper kinetic-active" style="cursor: move;">
    <div class="ib-main">
            <div class="column" id="about">
                 <div class="inner" id="i0">
                    <div class="content ui-draggable" id="0" style="height:20000px; background:pink;">
                       <h1>about</h1>
                    </div>
                    <div class="scroll">|</div>
                </div>
            </div>
            <div class="column" id="recent">
                 <div class="inner" id="i1" >
                    <div class="content ui-draggable" id="1" style="height:20000px; background:pink;">  
                        <h1>recent work</h1>
                    </div>
                    <div class="scroll">|</div>
                </div>
            </div>
            <div class="column">
                 <div class="inner" id="i2">
                    <div class="content ui-draggable" id="2" style="height:20000px; background:pink;">  
                        <h1>recent work 2</h1>
                    </div>
                    <div class="scroll">|</div>
                </div>
            </div>
            <div class="column">
                 <div class="inner" id="i3">
                    <div class="content ui-draggable" id="3" style="height:700px; background:pink;">  
                        <h1>why does this not work?</h1>
                    </div>
                    <div class="scroll">|</div>
                </div>
            </div>
    </div><!-- ib-main -->
</div>

そしてここに私のjavascriptがあります

    var cHeight, rHeight, mOffset, cWidth, vPoint;
function getScrollPos($thisCon, top){
    if(typeof top == 'undefined') top = $thisCon.position().top;
    var sHeight = $('#ib-main-wrapper').outerHeight() - 60; // 40: paddings from the edges of the wrapper
    var containment = $thisCon.draggable('option','containment');
    var conHeight = containment[1]-containment[3];
    var scrollPoint = (top/conHeight)*sHeight+20; // 20: padding-top from the top of the wrapper
    if(scrollPoint<20) scrollPoint = 20;
    return scrollPoint;
}
var delay = (function(){
    var timer = 0;
    return function(callback, ms){
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
    };
})();
(function($) {
$(document).ready(function(){
cHeight = (window.innerHeight)?window.innerHeight:$(window).height();
cWidth = (window.innerWidth)?window.innerWidth:$(window).width();
$('#ib-main-wrapper').height(cHeight-$('#ib-main-wrapper').offset().top-($('#ib-main-wrapper').outerHeight()-$('#ib-main-wrapper').height()));

$('.content').each(function(){
    var $curCon = $(this);
    $curCon.css('top',0);

    var currentId = $(this).parent().attr('id');
    if ($(this).height() > cHeight) {

    $curCon.draggable({axis:"y",scroll:false,containment: [0, -($curCon.height() - cHeight)-40, 0, $('#ib-main-wrapper').offset().top+35], drag: (function(e,ui){
        var $thisCon = $(e.target);
        var $scrollBar = $thisCon.closest('.column .inner').children('.scroll');
        $scrollBar.css('top',getScrollPos($thisCon,ui.position.top));
    })});
    if((-($curCon.height() - cHeight)-40)-$('#ib-main-wrapper').offset().top>0) $curCon.draggable('disable');

    } else {
    $('.column').css('overflow','hidden');
    $('#'+currentId).children('.scroll').css('display','none');

    }   
}); 
$('.scroll').draggable({axis:'y',scroll:false, containment: [0, 20 + $('#ib-main-wrapper').offset().top, 0, $('#ib-main-wrapper').height() - 40 + $('#ib-main-wrapper').offset().top], drag:function(e,ui){
    var $thisScroll = $(e.target);
    var $thisCon = $thisScroll.closest('.column .inner').children('.content');
    var sHeight = $('#ib-main-wrapper').height() - 60;
    var containment = $thisCon.draggable('option','containment');
    var conHeight = containment[1]-containment[3];
    $thisCon.css('top',($thisScroll.position().top-20)/sHeight*conHeight);
}});

$('.content').each(function(){
    var $curCon = $(this);
    if((-($curCon.height() - cHeight)-40-$('#ib-main-wrapper').offset().top)>0) $curCon.closest('.column').children('.scroll').draggable('disable');
});
});
$(window).resize(function() {   
rHeight = (window.innerHeight)?window.innerHeight:$(window).height();
cWidth = (window.innerWidth)?window.innerWidth:$(window).width();
$('#ib-main-wrapper').height(rHeight-$('#ib-main-wrapper').offset().top-($('#ib-main-wrapper').outerHeight()-$('#ib-main-wrapper').height()));
if(rHeight < 600)

var containerWidth = $('.ib-main').width();

var $tar = $('#ib-main-wrapper');
var left = $tar.scrollLeft();
var width = $('.ib-main').width() - $tar.width();
var part = left/width;
var $vertScrollBar = $('#vertScroll');
$vertScrollBar.css('left',20 + part*($tar.width()-60));

$('.scroll').draggable('option','containment', [0, 20 + $('#ib-main-wrapper').offset().top, 0, $('#ib-main-wrapper').height() - 40 + $('#ib-main-wrapper').offset().top]);
$('#vertScroll').draggable('option','containment',[20 + $('#ib-main-wrapper').offset().left ,$('#ib-main-wrapper').offset().top, $('#ib-main-wrapper').offset().left + $('#ib-main-wrapper').width() - 40, $('#ib-main-wrapper').offset().top]);

$('.content').each(function(){

    var $curCon = $(this);
    var $scrollBar = $curCon.closest('.column .inner').children('.scroll');
    $scrollBar.css('top',getScrollPos($curCon));

    $curCon.closest('.column').css('overflow','hidden');

    console.log(-($curCon.height() - rHeight)-40);
    if((-($curCon.height() - rHeight)-40 - $('#ib-main-wrapper').offset().top)>0) {
        $curCon.draggable('disable');
        $curCon.closest('.column .inner').children('.scroll').draggable('disable');
    } else {
        $curCon.closest('.column .inner').children('.scroll').draggable('enable');
        $curCon.draggable('enable');
        $curCon.draggable('option','containment', [0, -($curCon.height() - rHeight)-40, 0, $('#ib-main-wrapper').offset().top+40]);
    }
});     
delay(function(){
    $('.column .inner').children('.scroll').css('display','block');
    rHeight = $(window).height();
    mOffset = rHeight - cHeight;
    cHeight = rHeight;
    if(window.mOffset < 1) return;
    for(var i = 0;i<$('.content').length;i++){
        var $curCon = $('.content').eq(i);
        var pos = $curCon.position();

        if(pos.top <= -($('.content').eq(i).height() - rHeight)){
            var nPos = pos.top + mOffset - 20;
            if(nPos > 20) nPos = 20;
            $curCon.animate({
                top: nPos
            }, 500, function(){});
            $curCon.closest('.column .inner').children('.scroll').animate({
                top: getScrollPos($curCon,nPos)
            }, 500, function(){});
        }
    }       
    }, 200);
});})( jQuery );

何らかの理由で JavaScript が正しくコピーされませんが、ここでソースファイルを表示できます

http://satbulsara.com/js-fix/

score 0 · Accepted Answer

0

IE10 で動作しますが、Safari 固有の可能性があります。

于 2013-05-30T14:31:52.530 に答える

javascript - ウィンドウのサイズ変更時にスクローラーがアクティブにならない

1 に答える 1

Related

Reference