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 が正しくコピーされませんが、ここでソース ファイルを表示できます