onLoad滚动直到div居中

Question

我想制作一个菜单，滚动到current div，该div位于菜单中心。我做了一个小例子，但距离中心太远了。 在我的JSFiddle中，您可以看到它。

我的JQuery

  var scrollNav = ".page-nav .nav-content";
  var currentNavItem = ".page-nav .items .item.current";
  var currentPos = $(currentNavItem).position().left;
  $(scrollNav).animate({scrollLeft: currentPos}, 500);

Answer 1

您必须考虑整个区域的宽度和项目的宽度。

＆＃13;

＆＃13;

var scrollNav = ".page-nav .nav-content";
  var currentNavItem = ".page-nav .items .item.current";
  var currentPos = $(".item.current").position().left + $(".item.current").width()/2 - $(scrollNav).width()/2;
  $(scrollNav).animate({scrollLeft: currentPos}, 500);

＆＃13;

.page-nav{
    border-top: 1px solid #dedede;
    background: white;
}

.page-nav .nav-content{
    width:100%;
    max-width: 864px;
    margin: 0 auto;
    overflow-x:scroll;
}

.page-nav .items{
    text-align: center;
    white-space: nowrap;
    width:200%;
}

.page-nav .items .item{
    display: inline-block;
}

.page-nav .items .item a{
    display: block;
    padding: 15px 20px;
    color: #333;
    font-weight: 400;
}

.page-nav .items .item.current a{
    color: #0099ff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-nav">
        <div class="nav-content">
            <div class="items">
                <div class="item"><a href="">Menu item 1</a></div>
                <div class="item"><a href="">Menu item 2</a></div>
                <div class="item"><a href="">Menu item 3</a></div>
                <div class="item current"><a href="">Menu item 4</a></div>
                <div class="item"><a href="">Menu item 5</a></div>
                <div class="item"><a href="">Menu item 6</a></div>
            </div>
        </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您应该移除容器宽度的一半并添加el的一半宽度。刚刚更改了样品：

  var scrollNav = ".page-nav .nav-content";
  var currentNavItem = ".page-nav .items .item.current";
  var currentPos = $(currentNavItem).position().left + $(currentNavItem).width()/2 - $(scrollNav).width()/2;
  $(scrollNav).animate({scrollLeft: currentPos}, 500);