As you can see, this is the HTML code for my container. I want to scroll this part but it's not working.
// 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>I think the issue is your .conatiner does not have enough elements to overflow it
for example in the code below the #conatiner has #content that is bigger than the width of the parrent
#content has 500px
#conatiner has 400px
and it works just fine
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>