单击时水平动画滚动到 div

Question

所以，我需要制作一个水平手风琴卷轴，将打开的 div 居中。下面的代码将帮助你们理解：

<div class="wrapper">
    <div class="product">
        <div class="product-title">
            <img src="http://goo.gl/PUr1TP">
        </div>
        <div class="product-all">
            <div style="width: 200px; background: red;"   >1</div>
            <div style="width: 100px; background: yellow;">2</div>
            <div style="width: 400px; background: pink;"  >3</div>
            <div style="width: 270px; background: blue;"  >4</div>
            <div style="width: 500px; background: aqua;"  >5</div>
            <div style="width: 100px; background: green;" >6</div>
        </div>
    </div>
    <div class="product">
        <div class="product-title">
            <img src="https://goo.gl/hRJ3Dz">
        </div>
        <div class="product-all">
            <div style="width: 200px; background: red;"   >1</div>
            <div style="width: 100px; background: yellow;">2</div>
            <div style="width: 400px; background: pink;"  >3</div>
            <div style="width: 270px; background: blue;"  >4</div>
            <div style="width: 500px; background: aqua;"  >5</div>
            <div style="width: 100px; background: green;" >6</div>
        </div>
    </div>
    <div class="product">
        <div class="product-title">
            <img src="https://goo.gl/vX3Aih">
        </div>
        <div class="product-all">
            <div style="width: 200px; background: red;"   >1</div>
            <div style="width: 100px; background: yellow;">2</div>
            <div style="width: 400px; background: pink;"  >3</div>
            <div style="width: 270px; background: blue;"  >4</div>
            <div style="width: 500px; background: aqua;"  >5</div>
            <div style="width: 100px; background: green;" >6</div>
        </div>
    </div>
    <div class="product">
        <div class="product-title">
            <img src="http://goo.gl/rXt3kE">
        </div>
        <div class="product-all">
            <div style="width: 200px; background: red;"   >1</div>
            <div style="width: 100px; background: yellow;">2</div>
            <div style="width: 400px; background: pink;"  >3</div>
            <div style="width: 270px; background: blue;"  >4</div>
            <div style="width: 500px; background: aqua;"  >5</div>
            <div style="width: 100px; background: green;" >6</div>
        </div>
    </div>
</div>

body, html {
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    background: #ccc;
}

html {
    -webkit-box-sizing: border-box; 
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

*, *:before, *:after {
    -webkit-box-sizing: inherit;
       -moz-box-sizing: inherit;
            box-sizing: inherit;
}

.wrapper {
    height: 300px;
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    margin: 200px 0 0 0;
}

.product, .product-title, .product-all, .product-all div {
    display: inline-block;
    height: 100%;
    vertical-align: top;
}

.product-title img {
    height: 100%;
}

.product {
    position: relative;
}

.button {
    float: right;
    padding: 5px 10px;
    border: 2px solid green;
    cursor: pointer;
}

$(document).ready(function() {    
    $(".product-all").hide(100);
    $(".product-title").click(function() {
        $(".product-all").hide(500);
        $(this).parent().children(".product-all").show(500);

        var scrollTo = $(this).parent().children(".product-title").position().left;
        $('.wrapper').animate({
            'scrollLeft': scrollTo
        }, 800);
    });
});

以上是我试过的代码，但是滚动似乎转到了我的容器的最左边，而不是将 "active" div 放在左角。任何想法如何解决它？谢谢！

这是一个fiddle

Answer 1

我注意到你的问题并找到了解决方案。

您没有获得正确的 scrollTo。您试图获取所有 children 的位置（带有 class product-title），但您需要被点击的 child 的位置。

var scrollTo = $(this).parent().position().left;

http://fiddle.jshell.net/jxv7641y/1/

Answer 2

所以，我想通了！

$(document).ready(function() {

 $(".product-all").hide(100);
 $(".product-title").click(function() {

  $(".product-all").hide(500);
  $(this).parent().children(".product-all").show(500);

  //get the index of .product just clicked
  var i = 0;
  var piu = $(this).parent().index();
 //.wrapper
  var wrapper = $(this).parent().parent();
  var scroll_shit = 0;

  while (i < piu) {
   //get width of each .product-title, because the sum of all the previous .product-titles is the needed position
   product = wrapper.children().eq(i);
      scroll_shit = scroll_shit + product.children(".product-title").width();
      i++;
  }

  $('.wrapper').animate({
   'scrollLeft': scroll_shit
  }, 800);
 });

});

单击时水平动画滚动到 div

Horizontal animated scroll to div on click

css

jquery

accordion

scrollto