Con un elemento principal con scroll-behavior: smooth; Estoy tratando de desplazarlo cuando se hace clic en los elementos secundarios para que el elemento secundario sea completamente visible en el elemento principal. Esto funciona bien si solo necesita desplazarse horizontal o verticalmente, pero falla cuando tiene que hacer ambas cosas (por ejemplo, el niño está en la esquina inferior derecha y solo es parcialmente visible). El controlador de clics está averiguando qué valores agregar/restar a los atributos scrollTop y scrollLeft del padre. Observo que si pongo un setTimeout() con un retraso mayor que el tiempo de transición de desplazamiento alrededor de la configuración de scrollLeft (pero no scrollTop ), entonces funciona (pero parece tonto). ¿Hay alguna forma de hacer un desplazamiento suave tanto en X como en Y al mismo tiempo?

Aquí hay un pseudocódigo para que pueda tener una idea de lo que estoy haciendo:

HTML

 <div id="grid"> <div class="row"> <div id="cell-1" class="cell"> 1 </div> <div id="cell-2" class="cell"> 2 </div> ... </div> ... </div>

CSS

 #grid { height: 100vh; overflow: scroll; scroll-behavior: smooth; } .row { display: flex; } .cell { flex: 1 0 auto; border: 2px dashed gray; width: 250px; height: 100px; margin: 5px; padding: 10px; }

JS

 let grid = document.querySelector('#grid'); document.addEventListener('click', function (e) { if (e.target.classList.contains('cell')) { ... (omitted a bunch of code to obtain cell/grid X/Y bounds) ... if (cellRightBound > gridRightBound) { let scroll = cellRightBound - gridRightBound + halfCellWidth; grid.scrollLeft += scroll; console.log('scrolled right ' + scroll); } else if (cellLeftBound < gridLeftBound) { let scroll = gridLeftBound - cellLeftBound + halfCellWidth; if (scroll > 0) { grid.scrollLeft -= scroll; console.log('scrolled left ' + scroll); } } if (cellBottomBound > gridBottomBound) { let scroll = cellBottomBound - gridBottomBound + halfCellHeight; grid.scrollTop += scroll; console.log('scrolled down ' + scroll); } else if (cellTopBound < gridTopBound) { let scroll = gridTopBound - cellTopBound + halfCellHeight; if (scroll > 0) { grid.scrollTop -= scroll; console.log('scrolled up ' + scroll); } } } });