Como puede ver, este es el código HTML de mi contenedor. Quiero desplazarme por esta parte pero no funciona.
// This is the javascript for the slider function function slideRight() { var serviceCatalogue = document.getElementById('scroller'); serviceCatalogue.scrollLeft = 1400 } /* And this is the CSS for the conatiner. */ .conatiner { border: 1px solid black; width: 1000000000px; /* overflow: scroll; */ height: 500px; overflow-x: scroll; } <div class="conatiner" id="scroller"> <i style=" position:absolute; right: 50px; margin-top: 100px;" class="fas fa-arrow-right"> </i> <button id="left-button" swipe left </button> <button id="right-button"> swipe right </button> </div>Creo que el problema es que tu .conatiner no tiene suficientes elementos para desbordarlo.
por ejemplo, en el código a continuación, #conatiner tiene #content que es más grande que el ancho del parrent #content tiene 500 px #conatiner tiene 400 px
Y funciona bien
const button = document.getElementById('slide'); button.onclick = function () { document.getElementById('container').scrollLeft = 20; }; #container { width: 400px; height: 500px; border: 1px solid #ccc; overflow-x: scroll; } #content { width: 500px; background-color: #ccc; } <div id="container"> <div id="content">Click the button to slide right!</div> <button id="slide" type="button">Slide right</button> </div>