Search code examples
javascriptjsf-2jscrollpanecomposite-componentjquery-jscrollpane

Can't scroll in Javascript when using jScrollPane


I'm trying use JScrollPane to simplify the implementation of table scroll of my application. Some tables are so huge, this way, I'm implementing a dynamic load of the elements of the table. The loading is working correctly, however, when the table is loaded withe the new elements, the method scrollToY(int) isn't working:

Scroll = {

init: function (idComponente, componenteAAtualizar, comando) {
    var componente = $(PrimeFaces.escapeClientId(idComponente));
    componente.container = $(PrimeFaces.escapeClientId(idComponente + ":container"));
    componente.idComponenteAAtualizar = PrimeFaces.escapeClientId(componenteAAtualizar);
    componente.desativado = false;;
    componente.posicao=0;
    componente.comando = comando;

    componente.container[0].oncomplete = function (xhr, status, args) {
        var idEscapadoPainelLista = PrimeFaces.escapeClientId(idComponente);
        if (args != null)
            componente.desativado = args.desativarLiveScroll;
        componente.adicionarListenerScroll();
    }

    componente.adicionarListenerScroll = function () {
        $('.ui-datatable-scrollable-body').jScrollPane();
        $('.ui-datatable-scrollable-body').data('jsp').scrollToY(componente.posicao);
        $('.ui-datatable-scrollable-body').bind('jsp-scroll-y', componente.atualizarElementos);
    }

    componente.removerListenerScroll = function () {
        $('.ui-datatable-scrollable-body').unbind('jsp-scroll-y');
    }

    componente.atualizarElementos = function(event, scrollPositionY, isAtTop, isAtBottom) {
        if (!componente.desativado && isAtBottom){
            componente.posicao=scrollPositionY;
            componente.removerListenerScroll();
            comando();
        }
    };

    componente.adicionarListenerScroll();
}
};

Why I cant scroll to the position I want?


Solution

  • I solved the problem using JQuery to scroll to the position, instead of use scrollToY function of jScrollPane. So the code changed from this:

    componente.adicionarListenerScroll = function () {
        $('.ui-datatable-scrollable-body').jScrollPane();
        $('.ui-datatable-scrollable-body').data('jsp').scrollToY(componente.posicao);
        $('.ui-datatable-scrollable-body').bind('jsp-scroll-y', componente.atualizarElementos);
    }
    

    to this:

    componente.adicionarListenerScroll = function () {
            $('.ui-datatable-scrollable-body').scrollTop(componente.posicao);
            $('.ui-datatable-scrollable-body').jScrollPane();
            $('.ui-datatable-scrollable-body').bind('jsp-scroll-y', componente.atualizarElementos);
    }