Je n'ai pas fini par faire ma propre barre de défilement, je n'ai pas utilisé de bibliothèques de barre de défilement externes non plus. J'ai résolu le problème en calculant les positions du pouce de la barre de défilement et en suivant la position de la souris, en gérant les limites supérieure/inférieure du scroller qui provoquaient le verrouillage du scroller.

Souris-au-dessus de défilement de la barre de défilement du code

J'ai ajouté des événements mousemove à plusieurs éléments. J'ai calculé l'emplacement physique et la largeur de la barre de défilement. Quand la souris s'est déplacée les endroits où j'ai géré les événements mouseover de manière appropriée. J'ai également pu calculer la hauteur du thumbar lui-même en regardant la hauteur parent de mainTable et en la comparant à la hauteur de mainTable. J'ai pu calculer l'emplacement du thumbar en regardant le scrollTop.

document.getElementById("mainTable").parentNode.addEventListener("mousemove", function(e){
    var mainTab = document.getElementById("mainTable");
    if(mainTab.offsetWidth <= e.offsetX){
        var scrollbarHeight = mainTab.parentNode.offsetHeight - 36; //36 =height of up and down arrows
        var scrollbarThumbHeight = (scrollbarHeight/mainTab.offsetHeight)*scrollbarHeight;
        var childScrollTop = mainTab.parentNode.scrollTop
        var relativeThumbPosition = (childScrollTop/mainTab.offsetHeight) + 18; // 18=height of up arrow
        if(e.offsetY >= relativeThumbPosition && e.offsetY <= relativeThumbPosition+scrollbarThumbHeight){
            console.log("mouse-move thumbar:\t" + e.which);
            //execute specific mouse over code here
        }else{
            //execute any non-mouse over specific code here
        }
    }
})

La méthode suivante a finalement résolu mon problème

Barre de défilement pouce coincé en bas ou en haut - manipulation
C'est dans un écouteur d'événement mousemove sur le document corps

Il y a probablement une meilleure façon de le faire, en ajoutant et en supprimant l'écouteur d'événement (ne le faisant que lorsque c'est nécessaire) Cependant, j'ai ajouté l'écouteur et vérifié toujours - encore une fois à l'avenir, je vais probablement modifier cela afin qu'il soit plus efficace. Je vérifie si la position de défilement est verrouillée en haut ou en bas de la piste de la barre de défilement. Si c'est le cas, je gère la barre de défilement infinie de manière appropriée.

var mainTab = document.getElementById("mainTable");
if(mainTab.parentNode.scrollTop == 0){
    if(cnTable.buffStart != 0){
        upEvent(27);
    }else if (cnTable.tableStart != 0){
        upEvent(27);
    }
}else if(mainTab.parentNode.scrollTop + mainTab.parentNode.offsetHeight >= totHeight ){
    if(cnTable.buffStop < cnDAO.currentIndexes.length -1){
        downEvent(27);
    }else if (cnTable.tableStop < cnTable.buffer.length-1){
        downEvent(27);
    }
}

Enfin, code pour définir la position de défilement trouvé dans les upEvent et downEvent
Le code suivant est presque identique au code en question ci-dessus

Comme mentionné ci-dessus, j'ai géré la position, le code suivant est ce que j'ai utilisé pour changer la position, il y a beaucoup plus de code qui est entré dans le calcul de la position, mais j'ai décidé de ne montrer que le cas générique (toutes mes lignes n'ont pas la même hauteur, j'ai donc dû les événements)

var totHeight = document.getElementById("mainTable").offsetHeight -1;
document.getElementById("mainTable").parentNode.scrollTo(0,.24*totHeight);

ET

var totHeight = document.getElementById("mainTable").offsetHeight -1;
document.getElementById("mainTable").parentNode.scrollTo(0,.76*totHeight);