faire défiler la partie visible d'une div survolée dans une div plus petite sans jquery

Question

Je suis actuellement en train d'essayer de déplacer un plus grand div B horizontalement à l'intérieur d'un plus petit <div> A en utilisant deux boutons.
J'ai trouvé un problème similaire en utilisant jquery, mais je ne veux pas utiliser la bibliothèque juste pour cette section du code.

Voici le violon

Je veux faire défiler le champ de vision visible à l'aide d'un bouton "gauche" et "droite" pour déplacer le champ de 100px dans l'une ou l'autre direction sans utiliser jquery mais avec du pur Javascript, HTML et 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

Eh bien, c'est très facile si vous modifiez la fonction d'écriture scrollLeft propriété :

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 2

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 3

Mise à jour de votre extrait pour qu'il n'ait plus besoin de jQuery et ajout de boutons.

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

Jetez un coup d'œil à cette approche css.

Mise à jour : Ajout d'une 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>

Regarde ça.