スクロール部分がオーバーフローするdiv内のdiv内にjqueryがありません

Question

私は現在、より広い範囲内にdiv Bを水平方向に移動しようとしています<div> Aは2つのボタンを使用しています。
jqueryを使用して同様の問題が見つかりましたが、コードのこのセクションのライブラリだけを使用したいとは限りません。ここで

はHTML、私はjqueryのを使用せずに、純粋なJavaScriptを使用して、いずれかの方向にフィールド100pxにを移動するための「左」と「右」ボタンを使用してビューの可視フィールドをスクロールしたいfiddle

で、 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>

これをチェックしてください。それはもはやのjQueryを必要とするので、あなたのスニペットを更新しない

Answer 3

、とボタンを追加

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

さてあなたは、書き込み可能な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

このCSSのアプローチを見てみましょう。

更新：アニメーションを追加しました。

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>