我对从 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 无法正确复制，但您可以在此处查看源文件