Question

我正在尝试将点击的项目水平滚动到其父级的0,0，但父级似乎滚动到随机位置。

HTML / JS

<div class="nav-tabs-wrapper">
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
    <li><a href="#">Item 6</a></li>
  </ul>
</div>

<script>
$(function() {

  $('.nav-tabs-wrapper a').on('click',function(){
    var $anchor = $(this);
    $('.nav-tabs-wrapper').stop().animate({ scrollLeft: $($anchor).offset().left }, 300);
  });

}); 
</script>

SCSS

.nav-tabs-wrapper {
    width: 120px;
    background: #ccc;
    overflow: hidden;
    overflow-x: scroll;

    ul {
        margin: 0; 
        padding: 0;
        list-style: none;
        display: table;
        white-space: nowrap;
    }

    li {
     display: table-cell;   
    }

    a {
        display: inline-block;
        width: 100%;
        white-space: nowrap;
        padding: 10px;
    }
}

小提琴：http://jsfiddle.net/n8d69ma7/

理想情况下，我希望将这些项目滚动到中心，但第一步是让它们正确滚动。

任何帮助将不胜感激！

Answer 1

这是一个静态版本 http://jsfiddle.net/davidsonsousa/KVs94/

这是一个动态解决方案，基于点击＆＃34; li＆＃34; -element的索引及其宽度（HTML和CSS保持不变）：

$(function() {
    $('.nav-tabs-wrapper a').on('click',function(){
        var index = $(this).parent('li').index();
        var offset = (index) * $(this).width() - $(this).width()/2;
        $('.nav-tabs-wrapper').animate({scrollLeft: offset}, 800);
    });
});

使用＆＃34; outerWidth（true）＆＃34;而不是＆＃34; width（）＆＃34;如果您需要考虑填充或边距：

    var offset = (index) * $(this).outerWidth(true) - 
        ($('.nav-tabs-wrapper').width()/2 - $(this).outerWidth(true)/2);

Jquery水平滚动，触发/目标将不会滚动到正确的位置

1 个答案: