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>
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.