przewijanie widocznej części nadmuchanego div wewnątrz mniejszego div bez jquery

Question

Obecnie próbuję przesunąć szerszy div B poziomo wewnątrz mniejszego <div> A za pomocą dwóch przycisków.
Znalazłem podobny problem za pomocą jquery, ale nie chcę korzystać z biblioteki tylko dla tej sekcji w kodzie.

Oto fiddle

chcę przewinąć widocznego pola widzenia przy użyciu „w lewo” i „prawo” przycisk, aby przenieść pole 100px w obu kierunkach bez użycia jQuery ale z czystym JavaScript, HTML i 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

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>

to sprawdzić.

Answer 3

zaktualizowaniu fragment więc nie potrzebuje już jQuery i dodano przyciski

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

Dobrze, że jest bardzo łatwe, jeśli zmodyfikować właściwość zapisu scrollLeft:

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 5

Spójrz na tego podejścia css.

Aktualizacja: Dodano animację.

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>