Question

我正在尝试使用两个按钮在较小的div A内水平移动更宽的<div> B。
我发现了一个使用jquery的类似问题，但是不想在代码中仅使用该部分的库。

以下是fiddle

我想使用“左”和“右”按钮滚动可见视野，以便在不使用jquery但使用纯Javascript，HTML和CSS的情况下向任一方向移动字段100px。 < / p>

<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

如果修改可写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 2

＆＃13;

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);

＆＃13;

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

＆＃13;

Answer 3

更新了您的代码段，因此它不再需要jQuery，并添加了按钮

＆＃13;

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);
}

＆＃13;

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

＆＃13;

Answer 4

看看这个css方法。

更新：添加动画。

＆＃13;

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');
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

＆＃13;

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);
}

＆＃13;

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

＆＃13;

检查一下。

滚动可见部分溢出div内部较小的div没有jquery

5 个答案: