居中溢出：DIV 內的自動內容

Question

我正在嘗試在溢出設置為自動的 DIV 視口內創建一個網格，並希望為其添加縮放功能。 用戶應該能夠放大/縮小，但我希望在整個縮放過程​​中保持內容中心對齊。

縮放時，水平軸上的溢出內容居中，左右滾動時，我可以看到該軸上的所有 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

我認為您應該考慮使用transform和transform-origin屬性，而不是使用width / height CSS 屬性來縮放。 您可以使用transform的scale值進行縮放，然后將item的中心坐標指定為transform-origin值。

• CSS 轉換
• CSS 變換原點