Scrolling the visible part of an overflown div inside a smaller div without jquery

Question

I'm currently trying to move the wider div B horizontally inside the smaller <div> A using two buttons.
I found a similar problem using jquery, but I do not want to use the library only for this section in the code.

Here is the fiddle

I want to scroll the visible field of view using the left and right buttons to move the 100 pixels field in any direction without using jquery, but with pure Javascript, HTML and CSS.

 <div id="outer-div" style="width:250px;overflow:hidden;"> <div style="width:750px;"> <div style="background-color:orange;width:250px;height:100px;float:left;"> </div> <div style="background-color:red;width:250px;height:100px;float:left;"> </div> <div style="background-color:blue;width:250px;height:100px;float:left;"> </div> </div> </div> <button>left</button> <button>right</button> 

Answer 1

 var outerDiv = document.getElementById('outer-div'); function moveLeft() { outerDiv.scrollLeft -= 100; } function moveRight() { outerDiv.scrollLeft += 100; } var leftButton = document.getElementById('left-button'); var rightButton = document.getElementById('right-button'); leftButton.addEventListener('click', moveLeft, false); rightButton.addEventListener('click', moveRight, false); 

 <div id="outer-div" style="width:250px;overflow:hidden;"> <div style="width:750px;"> <div style="background-color:orange;width:250px;height:100px;float:left;"> </div> <div style="background-color:red;width:250px;height:100px;float:left;"> </div> <div style="background-color:blue;width:250px;height:100px;float:left;"> </div> </div> </div> <button id="left-button">left</button> <button id="right-button">right</button> 

Answer 2

Well, it is very simple if you change the writeable scrollLeft property:

 document.getElementById('to-right').onclick = function() { document.getElementById('outer-div').scrollLeft += 100; } document.getElementById('to-left').onclick = function() { document.getElementById('outer-div').scrollLeft -= 100; } 

 <div id="outer-div" style="width:250px;overflow:hidden;"> <div style="width:750px;"> <div style="background-color:orange;width:250px;height:100px;float:left;"></div> <div style="background-color:red;width:250px;height:100px;float:left;"></div> <div style="background-color:blue;width:250px;height:100px;float:left;"></div> </div> </div> <button id="to-left">left</button> <button id="to-right">right</button> 

Answer 3

Updated your snippet so that it no longer needed jQuery and added buttons

 document.getElementById("outer-div").onmousemove = function () { document.getElementById("outer-div").scrollTo(event.clientX, 0); } document.getElementById("move-left").onclick = function () { document.getElementById("outer-div").scrollBy(100, 0); } document.getElementById("move-right").onclick = function () { document.getElementById("outer-div").scrollBy(-100, 0); } 

 <div id="outer-div" style="width:250px;overflow:hidden;"> <div style="width:500px;"> <div style="background-color:orange;width:250px;height:250px;float:left;"> </div> <div style="background-color:red;width:250px;height:250px;float:left;"> </div> </div> </div> <button id="move-left">Move Left</button> <button id="move-right">Move Left</button> 

Answer 4

Take a look at this css approach.

Update: Added animation.

 var value = 0; move = function(direction) { value += ((direction > 0 && value >= 0)||(direction < 0 && value <= -500)) ? 0 : (direction * 100); document.documentElement.style.setProperty('--movex', value + 'px'); } 

 :root { --movex: 0; } .moved { transform: translateX(var(--movex)) } div{ transition: transform 1000ms ease-in-out; } 

 <div id="outer-div" style="width:250px;overflow:hidden;"> <div style="width:750px;"> <div class="moved" style="background-color:orange;width:250px;height:100px;float:left;"> </div> <div class="moved" style="background-color:red;width:250px;height:100px;float:left;"> </div> <div class="moved" style="background-color:blue;width:250px;height:100px;float:left;"> </div> </div> </div> <button onclick = "move(-1)">left</button> <button onclick = "move(1)">right</button> 

Answer 5

 var div = document.getElementById("outer-div"); var left = document.getElementById("left"); var right = document.getElementById("right"); left.onclick = function () { if (div.scrollLeft < 200) div.scrollBy(100, 0); } right.onclick = function () { div.scrollBy(-100, 0); } 

 <div id="outer-div" style="width:250px;overflow:hidden;"> <div style="width:750px;"> <div style="background-color:orange;width:250px;height:100px;float:left;"> </div> <div style="background-color:red;width:250px;height:100px;float:left;"> </div> <div style="background-color:blue;width:250px;height:100px;float:left;"> </div> </div> </div> <button id="left">left</button> <button id="right">right</button> 

Check this.