jQuery - устанавливает положение полосы прокрутки, если hasClass

Question

Я пытаюсь, чтобы полоса прокрутки .list автоматически находилась в позиции .button с классом .focus (я не хочу анимированную прокрутку, я просто хочу, чтобы она уже была натребуемая позиция под нагрузкой).

Я надеюсь сохранить позицию, где .button с .focus находится в крайнем левом углу контейнера .list.

$('.button').each(function() {
  var container = $('.list'),
    scrollTo = $(this);

  if (scrollTo.hasClass('focus')) {
    var leftOffset = scrollTo.offset().left - ($(window).width() / 2 - scrollTo.width() / 2) + container.scrollLeft();

    container.animate({
      scrollLeft: leftOffset
    }, 1000);
  }
});

.list {
  display: flex;
  overflow-x: scroll;
  width: 250px;
  border: 2px solid;
}

.button {
  width: 150px;
  height: 40px;
  border: 1px solid
}

.focus {
  background: green
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list">
  <button class="button">Button 1</button>
  <button class="button">Button 2</button>
  <button class="button">Button 3</button>
  <button class="button">Button 4</button>
  <button class="button">Button 5</button>
  <button class="button">Button 6</button>
  <button class="button">Button 7</button>
  <button class="button focus">Button 8</button>
  <button class="button">Button 9</button>
  <button class="button">Button 10</button>
  <button class="button">Button 11</button>
  <button class="button">Button 12</button>
  <button class="button">Button 13</button>
  <button class="button">Button 14</button>
  <button class="button">Button 15</button>
</div>

Answer 1

Вы можете использовать метод .scrollLeft(), чтобы расположить кнопку в div:

$('div.list').scrollLeft(
  $('button.focus').offset().left - $('div.list').offset().left + $('div.list').scrollLeft()
);

.list {
  display: flex;
  overflow-x: scroll;
  width: 250px;
  border: 2px solid;
}

.button {
  width: 150px;
  height: 40px;
  border: 1px solid
}

.focus {
  background: green
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list">
  <button class="button">Button 1</button>
  <button class="button">Button 2</button>
  <button class="button">Button 3</button>
  <button class="button">Button 4</button>
  <button class="button">Button 5</button>
  <button class="button">Button 6</button>
  <button class="button">Button 7</button>
  <button class="button focus">Button 8</button>
  <button class="button">Button 9</button>
  <button class="button">Button 10</button>
  <button class="button">Button 11</button>
  <button class="button">Button 12</button>
  <button class="button">Button 13</button>
  <button class="button">Button 14</button>
  <button class="button">Button 15</button>
</div>

$('button.focus').offset().left почти достаточно для изменения положения кнопки, но вы также хотите учесть положение div.list