ScrollTo keeps scrolling too far down

Question

I have a ul list that I am trying to make scroll down by the height of the li's inside it (to create a vertical slider) using the latest version of JQuery ScrollTo (v. 1.4.11).
It is scrolling up an down and working almost as expected.
But always seems to scroll 6px to far down which pushes it out of position when scrolling back up again.

The site is responsive and the li's will drop to the next line when needed, (max of 4 li's showing at one time, it will drop down to 3 etc, and still scroll properly).
I have tried using offset in the function but that made no difference.
If set a -6px margin bottom on the li's it seems to fix it in desktop browsers to certain extent (Firefox and opera still scroll 1px to far) but on all mobiles and tablets the top of the li's behind start showing below.
The rest of the site is using HTML5 and CSS3.

I think it has something to do with an invisible horizontal scrollbar, is that true? And if so how can I fix it?

My code is below:

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');
});

Any help would greatly appreciated, Thanks!

Answer 1

I know this is late, but if anyone does come across this or a similar problem, I found out that the problem was down to the <li> elements being display: inline-block. This meant the item always had superfluous spacing. By using float: left instead this solved the issue.