javascript - 单击中心 元素并将容器设置为滚动

Question

我已经快完成了，我只需要最后一点帮助。

我有一个水平滚动导航，当我点击一个元素时，它会将那个元素带到屏幕中间(值得注意的是，这是针对移动屏幕或类似屏幕的)并给它一个 active 类或其他东西。

我的问题是，当容器 div 设置为 overflow: hidden 时它工作正常，但是我希望容器可以通过使用 overflow-x: scroll< 自由滚动.

但这会使定位失效，如果你滚动，然后点击一个框，你会注意到它没有以点击前滚动的量为中心。

任何帮助都会很棒!有一个JS Fiddle这里

$(document).ready(function() {
    var scrollTo = 0;
    $('body').on('click', "a", function() {
        var activeItem = $('li.active');
        var selectedItem = $(this).parent()

        var activeIndex = $('li').index(activeItem);
        var selectedIndex = $('li').index(selectedItem);

        scrollTo = -selectedItem.position().left + $('.container').width() / 2 - selectedItem.width() / 2;

        $('ul').css('transform', 'translateX(' + scrollTo + 'px)');
        activeItem.removeClass('active');
        selectedItem.addClass('active');

    });
 });

div.container {
   width: 600px;
   overflow: scroll;
}

ul {
   white-space: nowrap;
   transition: all ease 750ms;
   position: relative;
 }

 ul li {
    display: inline-block;
    background: green;
 }

 ul li a {
    padding: 80px;
    display: block;
    color: white;
    font-weight: bold;
    text-decoration: none;
 }

ul li.active {
    background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <ul>
    <li class="active"> <a href="#">1</a></li>
    <li> <a href="#">2</a></li>
    <li> <a href="#">3</a></li>
    <li> <a href="#">4</a></li>
    <li> <a href="#">5</a></li>
    <li> <a href="#">6</a></li>
    <li> <a href="#">7</a></li>
    <li> <a href="#">8</a></li>
  </ul>
</div>

Answer 1

您必须考虑容器的 scrollLeft:

$(document).ready(function() {
    var scrollTo = 0;
    $('body').on('click', "a", function() {
      var activeItem = $('li.active');
      var selectedItem = $(this).parent()

      var activeIndex = $('li').index(activeItem);
      var selectedIndex = $('li').index(selectedItem);

      scrollTo = $('.container').scrollLeft() -selectedItem.position().left + ($('.container').width() / 2) - (selectedItem.width() / 2);
      
      $('ul').css('transform', 'translateX(' + scrollTo + 'px)');
      activeItem.removeClass('active');
      selectedItem.addClass('active');
    });
 });

div.container {
   width: 600px;
   overflow: scroll;
}

ul {
   white-space: nowrap;
   transition: all ease 750ms;
   position: relative;
 }

 ul li {
    display: inline-block;
    background: green;
 }

 ul li a {
    padding: 80px;
    display: block;
    color: white;
    font-weight: bold;
    text-decoration: none;
 }

ul li.active {
    background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <ul>
    <li class="active"> <a href="#">1</a></li>
    <li> <a href="#">2</a></li>
    <li> <a href="#">3</a></li>
    <li> <a href="#">4</a></li>
    <li> <a href="#">5</a></li>
    <li> <a href="#">6</a></li>
    <li> <a href="#">7</a></li>
    <li> <a href="#">8</a></li>
  </ul>
</div>