如何水平滚动DIV到容器中心？

Question

I have a container with 2 DIVs. When I click a button, I'm trying to center the yellow DIV horizontally in the container. However, if I click the button multiple times, it scrolls back and forth and if I manually scroll the container and then click the button, the yellow DIV is never scrolled into view.

Here's the jsfiddle. If you click the button over and over, it will scroll back and forth. Why does it do that?: https://jsfiddle.net/nug4urna/

HTML:

<div id='container'>
<div id='blue'></div>
<div id='yellow'></div>
</div>
<div id='mybutton'>
click to scroll yellow div into view
</div>
<div id='log'>
</div>

JAVSCRIPT:

function scrollDivIntoView(id) {
      var elOffset = $(id).offset().left;
      var elWidth = $(id).width();
      var containerWidth = $('#container').width();
      var offset = elOffset - ((containerWidth - elWidth) / 2);

      $('#container').scrollLeft(offset);

      var _log = 'elOffset = ' + elOffset + '<br>';
      _log += 'elWidth = ' + elWidth + '<br>';
      _log += 'containerWidth = ' + containerWidth + '<br>';
      _log += 'offset = ' + offset;

      $('#log').html(_log);
}

$(document).ready(function() { 
    $('body').on('click', '#mybutton', function(){ 
        scrollDivIntoView('#yellow');
    }); 
});

CSS:

#container{
  width:100%;
  height:150px;
  border:1px solid red;
  display:inline-block;
  white-space:nowrap;
  overflow-y:hidden;
  overflow-x:auto;
}
#blue{
  width:2000px;
  height:100px;
  background-color: blue;
  margin:5px;
  display:inline-block;
}
#yellow{
  width:200px;
  height:100px;
  background-color: yellow;
  margin:5px;
  display:inline-block;
}
#mybutton{
  margin-top:10px; 
  cursor:pointer;
  background-color:black;
  color:white;
  width:400px;
  padding:4px;
  text-align:center;
}

Answer 1

If you change the first line to var elOffset = $(id)[0].offsetLeft; then the original code works every time in every situation.

See the following for more information: https://javascript.info/size-and-scroll

Answer 2

To center it, you'll need to add a right margin to your yellow container to "pad" the right side and allow it to center. I updated your fiddle: https://jsfiddle.net/nug4urna/2/

#yellow{
  width:200px;
  height:100px;
  background-color: yellow;
  margin:5px;
  display:inline-block;
  margin-right: 100%;
}

Also the reason it jumps back and forth is because the calculation is based on the var elOffset = $(id).offset().left; which changes after each click. I updated the fiddle to check if the offset is greater than the container width. If it's less, we prevent the update.

  if (elOffset > containerWidth) {
    $('#container').scrollLeft(offset);
  }

UPDATE: This works the first time around, but if the user scrolls the calculations aren't quite right. You should look into https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth to help calculate how far the scroll bar can actually move. Meaning that when the bar has moved all the way to the right to show all the content, the numeric value is not the same as the total width.