Traté de hacer desplazamiento horizontal con scrollLeft. Puedo alinear div horizontalmente pero parece que la función scrollLeft no funciona.
Aquí está mi código:
function myFunction() { var elmnt = document.getElementById("myDIV"); elmnt.scrollLeft += 50; } #myDIV { height: 250px; width: auto; display:inline-flex; gap:10px; overflow: auto; } #content { height: 800px; width: 200px; background-color: coral; } <button onclick="myFunction()">Scroll div</button><br><br> <div id="myDIV"> <div id="content"> Some text inside a div element.<br><br> Some text inside a div element. </div> <div id="content"> Some text inside a div element.<br><br> Some text inside a div element. </div> <div id="content"> Some text inside a div element.<br><br> Some text inside a div element. </div> <div id="content"> Some text inside a div element.<br><br> Some text inside a div element. </div> <div id="content"> Some text inside a div element.<br><br> Some text inside a div element. </div> </div>Apliqué el white-space y el estilo de overflow dentro del estilo #myDiv ; Configuré la propiedad de width en scrollLeft 220px 1] .
function myFunction() { var element = document.getElementById("myDIV"); element.scrollLeft += 50; } #myDIV { white-space: nowrap; overflow: scroll; width: 220px; height: 250px; display: inline-flex; gap: 10px; } #content { height: 800px; width: 200px; background-color: coral; } <button onclick="myFunction()">Scroll div</button><br><br> <div id="myDIV"> <div id="content"> Some text inside a div element.<br><br> Some text inside a div element. </div> <div id="content"> Some text inside a div element.<br><br> Some text inside a div element. </div> <div id="content"> Some text inside a div element.<br><br> Some text inside a div element. </div> <div id="content"> Some text inside a div element.<br><br> Some text inside a div element. </div> <div id="content"> Some text inside a div element.<br><br> Some text inside a div element. </div> </div>