Question

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

我有一个水平滚动导航，当我点击一个项目时，它会将该项目带到屏幕中间（值得注意这是用于移动屏幕或类似）并给它一类活动或其他东西。

我的问题是，当容器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>

单击中心<li>项目，并将容器设置为滚动

1 个答案: