onLoad scrollen, bis div zentriert

Question

Ich möchte ein Menü, das Scroll zu current div und das div ist in der Mitte des Menüs. Ich habe ein kleines Beispiel gemacht, aber es geht zu weit von der Mitte. In meinem JSFiddle können Sie es sehen.

Es ist mein 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

Sie haben in der Breite der gesamten Fläche und Breite Ihres Artikels zu berücksichtigen.

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

.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; 
 
}

<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>

Answer 2

Sie sollten die Hälfte der Breite des Behälters entfernen und eine halbe Breite Ihres el hinzuzufügen. Nur Ihre Probe geändert:

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