2015-10-21 86 views
-1

我有UI布局,我不想改变(它不是我的,有设计师提供给我们的)。 需求是关闭滚动条滚动tbody内容。 它完美的作品在Chrome和IE浏览器和事件是无法在Firefox中进行无限滚动工作,溢出:-moz-scrollbars-none

$(global.table).find('tbody').on('scroll', function() { /*AJAX load next rows*/ }); 

不过,Firefox是我stucked。溢出:-moz-scrollbars-none它不想滚动tbody内容!

我已经决定使用

$(document).on('scroll', function() { 
    if ($(document).scrollTop() + $(document).innerHeight() >= $('body').get(0).scrollHeight) { 
    global.showNextRows(); 
    } 
}); 

它的工作方式操纵的文件scrollTop的位置,但TBODY内容不滚动 - 我看不到追加行。我知道我可以使用ScrollIntoView或其他的东西,但如何以最自然的方式做到这一点?

//Called by showNextRows 
function InsertRows(data, status, xhr) { 
    var rowHeight = global.getRows().first().height(); 
    $(data).insertAfter(global.getRows().filter(':last')); 
    var takenRows = $(data).filter('tr').length; 
    if (takenRows < global.requestedTake) { 
    //$(global.table).find('tbody').off('scroll'); 
    $(document).off('scroll'); 
    } else { 
    $(document).scrollTop($(window).scrollTop() - takenRows * rowHeight); 
    } 
    Success(data, status, xhr); 
} 
+0

'溢出:-moz-滚动条,none'是已废弃,应更换(HTTPS://developer.mozilla。 org/en/docs/Web/CSS/overflow)通过'overflow:hidden',你试过了吗? –

+0

我不能使用overflow:hidden,因为那么滚动事件不会在Chrome的tbody中被触发。无论如何,它不能解决目前Firefox的问题。 – Alexander

回答

0

我想出了下面肮脏的黑客:)

$(document).ready(function() { 
    if (navigator.userAgent.match(/firefox/i)) { 
     $(global.container).css('overflow-y', 'hidden'); 
     $(global.container).css('overflow-x', 'hidden'); 
     $(global.table).find('tbody').css('overflow-y', 'auto'); 
     $(global.table).find('tbody').css('padding-right', '16px'); 
    } 
    ... 
}