Question

我有一个ul列表，我试图使用最新版本的JQuery ScrollTo（v.4.4.11）按里面的li高度向下滚动（创建一个垂直滑块）。
它向上滚动并且几乎按预期工作但似乎总是将6px滚动到远处，这会在再次向上滚动时将其推出位置。

该网站是响应式的，并且li会在需要时下降到下一行（一次显示最多4个li，它将下降到3等，并且仍然正确滚动）。
我已尝试在函数中使用偏移但没有区别。
如果在li上设置-6px的保证金底部，它似乎在某种程度上将它固定在桌面浏览器中（Firefox和歌剧仍然向1px滚动到远处），但在所有手机和平板电脑上，li的顶部开始显示在下面。
该网站的其余部分使用HTML5和CSS3。

我认为它与隐形水平滚动条有关，是真的吗？如果是这样，我该如何解决？

我的代码如下：

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

任何帮助都会非常感谢，谢谢！

Answer 1

我知道这已经很晚了，但是如果有人遇到过这个或类似的问题，我发现问题归结为<li>元素为display: inline-block。这意味着该物品总是有多余的间距。通过使用float: left，这解决了问题。

ScrollTo一直向下滚动太远

1 个答案: