Question

我的js水平卷轴改编自jquery ui。

前3个滚动条有效，但在窗口调整大小时，滚动条出现在第4个，但除非刷新页面，否则不起作用。如何在调整页面大小时让它工作？

这是相关页面的屏幕截图 enter image description here

你可以看到我们有4列，3列有右侧的滚动条，1列没有
在调整页面高度后，第4列会显示滚动条，但它不起作用，只有在刷新调整大小的页面时才会起作用

enter image description here

如何在调整页面大小时让它工作？

这是我的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/

Answer 1

它适用于IE10，它可能是Safari特有的。

滚动条在窗口调整大小时不激活

1 个答案: