Центрирование переполнения: автоматический контент внутри DIV

Question

Я пытаюсь создать сетку внутри области просмотра DIV с переполнением, установленным на auto, и хочу добавить в нее функцию масштабирования. Пользователь должен иметь возможность увеличивать / уменьшать масштаб, но я хочу, чтобы содержимое выравнивалось по центру в течение всего процесса масштабирования.

При масштабировании переполняемый контент по горизонтальной оси центрируется, а при прокрутке влево и вправо Я вижу все 8 ячеек сетки на этой оси - это прекрасно. Однако по какой-то странной причине переполненное содержимое на оси Y не центрируется при увеличении, и верхняя часть сетки исчезает из области просмотра и досадно не может быть видна или прокручена до.

Когда вы увеличьте масштаб, обратите внимание на то, как горизонтальная полоса прокрутки остается в центре, и что вы можете прокручивать влево и вправо и видеть все 8 полей, но вертикальная ось не работает одинаково.

Я приветствую ваши предложения и / или решение. Спасибо.

$(function() {
  var $container = $('.container');
  var current_zoom = 1;
  var current_cell_size = 20;
  var cells_x = 8;
  var cells_y = 8;
  var grid_size_x = cells_x * current_cell_size;
  var grid_size_y = cells_y * current_cell_size;
  var $grid = $('<div />').addClass('grid').css({
    'width': grid_size_x,
    'height': grid_size_y
  });

  for (var x = 0; x < cells_y; x++) {
    var $row = $('<div />').addClass('row');
    for (var y = 0; y < cells_x; y++) {
      var $cell = $('<div />').addClass('cell').css({
        'width': current_cell_size,
        'height': current_cell_size
      });
      $row.append($cell);
    }
    $grid.append($row);
  }

  $container.append($grid);

  center_viewport();

  // ----- EVENTS

  $('.zoom-in-btn').click(zoom_in);
  $('.zoom-out-btn').click(zoom_out);

  // ----- FUNCTIONS

  function center_viewport() {
    $container.scrollLeft((grid_size_x - $container.width()) / 2);
    $container.scrollTop((grid_size_y - $container.height()) / 2);
  }

  function zoom_in() {
    current_cell_size = current_cell_size + 10;
    grid_size_x = cells_x * current_cell_size;
    grid_size_y = cells_y * current_cell_size;
    $grid.css({
      'width': grid_size_x,
      'height': grid_size_y
    }).find('.cell').css({
      'width': current_cell_size,
      'height': current_cell_size
    });
    center_viewport();
  }

  function zoom_out() {
    current_cell_size = current_cell_size - 10;
    grid_size_x = cells_x * current_cell_size;
    grid_size_y = cells_y * current_cell_size;
    $grid.css({
      'width': grid_size_x,
      'height': grid_size_y
    }).find('.cell').css({
      'width': current_cell_size,
      'height': current_cell_size
    });
    center_viewport();
  }

});

html,
body {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

html .container,
body .container {
  position: fixed;
  top: 30px;
  right: 30px;
  bottom: 30px;
  left: 30px;
  overflow: auto;
  border: solid 1px #000;
}

html .container .grid,
body .container .grid {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

html .container .grid .row,
body .container .grid .row {
  display: flex;
}

html .container .grid .row:nth-child(odd) .cell:nth-child(odd),
body .container .grid .row:nth-child(odd) .cell:nth-child(odd) {
  background: #EEE;
}

html .container .grid .row:nth-child(even) .cell:nth-child(even),
body .container .grid .row:nth-child(even) .cell:nth-child(even) {
  background: #EEE;
}

html .container .zoom-btns,
body .container .zoom-btns {
  position: fixed;
  z-index: 2;
  right: 50px;
  bottom: 50px;
}

html .container .zoom-btns button,
body .container .zoom-btns button {
  margin-left: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="container">
  <div class="zoom-btns">
    <button class="zoom-in-btn">Zoom In</button>
    <button class="zoom-out-btn">Zoom Out</button>
  </div>
</div>

Демонстрационная скрипка здесь .

Answer 1

Я думаю, что вместо использования width / height CSS свойств для увеличения, вам следует рассмотреть возможность использования transform и transform-origin свойств. Для увеличения можно использовать значение scale, равное transform, а затем назначить координаты центра элемента в качестве значения transform-origin.

• CSS Преобразование
• CSS Начало преобразования