Centering overflow:auto content inside DIV

Question

I'm trying to create a grid inside of a DIV viewport with overflow set to auto and want to add a zoom feature to it. The user should be able to zoom in/out but I want to keep the content center-aligned throughout the zoom process.

When zooming, the overflowing content on the horizontal axis is centered and, when scrolled left and right, I can see all 8 grid boxes on that axis - this is perfect. However, for some strange reason, the overflowing content on the Y axis is not centering when zoomed and the uppermost part of the grid disappears out of the viewport and annoyingly can't be seen or scrolled to.

When you zoom in, pay attention to how the horizontal scrollbar remains centered and that you can scroll left and right and see all 8 boxes but the vertical axis doesn't work the same way.

I welcome your suggestions and/or a solution. Thanks.

 $(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>

Demo Fiddle here .

Answer 1

I think that instead of using width / height CSS properties to zoom, you should consider using transform and transform-origin properties. You can use the scale value of transform to zoom, then assign the coordinates of the center of the item as the transform-origin value.

• CSS Transform
• CSS Transform Origin