onLoad滾動直到div居中

我想製作一個菜單，滾動到current div並且div位於菜單的中心。我舉了一個小例子，但它離中心太遠了。在我的JSFiddle中，您可以看到它。onLoad滾動直到div居中

有我的JQuery

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

來源

2017-05-01 Daniels Jirgensons

你在你的項目的整個面積和寬度的寬度因素。

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>

來源

2017-05-01 12:25:44 Neil

您應該刪除容器的寬度的一半，並添加您的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);

來源

2017-05-01 12:36:15 quirimmo

onLoad滾動直到div居中

回答

相關問題