ScrollTo continue à défiler trop loin

Question

J'ai une liste ul que j'essaie de faire défiler vers le bas par la hauteur de la li à l'intérieur (pour créer un curseur vertical) en utilisant la dernière version de JQuery ScrollTo (v. 1.4.11).
Il défile vers le haut et fonctionne presque comme prévu.
Mais semble toujours faire défiler 6px vers le bas qui le pousse hors de position lors du défilement à nouveau vers le haut.

Le site est réactif et le li descendra à la ligne suivante si nécessaire, (maximum de 4 li montrant à la fois, il descendra à 3 etc, et défilera toujours correctement).
J'ai essayé d'utiliser le décalage dans la fonction mais cela ne faisait aucune différence.
Si vous définissez une marge de -6px en bas sur le li, il semble dans certains navigateurs de bureau (Firefox et l'opéra défilent encore 1px loin) mais sur tous les mobiles et tablettes le début du li.
Le reste du site utilise HTML5 et CSS3.

Je pense que cela a quelque chose à voir avec une barre de défilement horizontale invisible, est-ce vrai? Et si oui, comment puis-je le réparer?

Mon code est ci-dessous:

HTML

<ul> 
    <li>list one</li> 
    <li>list two</li> 
    <li>list three</li> 
    <li>list four</li> 
    <li>list six</li> 
    <li>list seven</li> 
    <li>list eight</li> 
</ul> 

CSS

ul { 
    height: 225px !important; 
    overflow: hidden; 
    max-width: 960px; 
    width: 95%; 
    margin: 0 auto; 
} 

li { 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
    width: 190px; 
    height: 225px !important; 
    overflow: hidden; 
} 

Javascript

var getHeight = $("ul li").height(); 
var scroll = function (scroll) { 
    if (scroll == 'down') { 
     scroll = '-=' + getHeight + 'px'; 
    } 
    else if (scroll == 'up') { 
     scroll = '+=' + getHeight + 'px'; 
    }; 
    $('ul').scrollTo(scroll, 300, { offset: -6 }); 
}; 
$('.widget-HomePagePortfolio span.prev').bind('click', function() { 
    scroll('down'); 
}); 
$('.widget-HomePagePortfolio span.next').bind('click', function() { 
    scroll('up'); 
}); 

Toute aide serait grandement appréciée, Merci!

Answer 1

Je sais que c'est en retard, mais si quelqu'un rencontre ce problème ou un problème similaire, j'ai découvert que le problème était que les éléments <li> étaient display: inline-block. Cela signifiait que l'article avait toujours un espacement superflu. En utilisant float: left à la place cela a résolu le problème.