如何自动滚动到div中间的水平？

Question

我想自动滚动到水平维度的中间位置，这样红线（位于svg正中间）位于中间。

我必须为scrollLeft选择哪些值？

var div = $('.container');
div.animate({
  scrollLeft: div.width() / 2 + div.offset().left
});

.container {
  height: 200px;
  width: 400px;
  border: 1px solid black;
  overflow: scroll;
  margin-left: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=container>
  <svg width="1000" height="400">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    <circle cx="200" cy="200" r="40" stroke="green" stroke-width="4" fill="yellow" />
    <circle cx="600" cy="200" r="40" stroke="green" stroke-width="4" fill="yellow" />
    <circle cx="40" cy="320" r="40" stroke="green" stroke-width="4" fill="yellow" />
    <circle cx="960" cy="320" r="40" stroke="green" stroke-width="4" fill="yellow" />

    <line x1="499" y1="0" x2="499" y2="400" style="stroke:rgb(255,0,0);stroke-width:2" />

  </svg>
</div>

Answer 1

您应该设置scrollLeft属性，如下所示：

div.find('svg').width() / 2 - div.width() / 2

见下面的演示：

＆＃13;

＆＃13;

var div = $('.container');
div.animate({
  scrollLeft: div.find('svg').width() / 2 - div.width() / 2
});

＆＃13;

.container {
  height: 200px;
  width: 400px;
  border: 1px solid black;
  overflow: scroll;
  margin-left: 50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=container>
  <svg width="1000" height="400">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    <circle cx="200" cy="200" r="40" stroke="green" stroke-width="4" fill="yellow" />
    <circle cx="600" cy="200" r="40" stroke="green" stroke-width="4" fill="yellow" />
    <circle cx="40" cy="320" r="40" stroke="green" stroke-width="4" fill="yellow" />
    <circle cx="960" cy="320" r="40" stroke="green" stroke-width="4" fill="yellow" />

    <line x1="499" y1="0" x2="499" y2="400" style="stroke:rgb(255,0,0);stroke-width:2" />

  </svg>
</div>

＆＃13;

＆＃13;

＆＃13;