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

Question

I want to automatically scroll to the middle in the horizontal dimension, such that the red line (which is placed right in the middle of the svg) is in the middle.

Which values do I have to choose for 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

You should be setting the scrollLeft property like below:

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

See demo below:

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

 .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>