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

时间:2017-11-29 14:31:33

标签: javascript html css

我正在尝试使用两个按钮在较小的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>

5 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:3)

&#13;
&#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;
&#13;
&#13;

答案 2 :(得分:1)

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

&#13;
&#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;
&#13;
&#13;

答案 3 :(得分:1)

看看这个css方法。

更新:添加动画。

&#13;
&#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;
&#13;
&#13;

答案 4 :(得分:0)

&#13;
&#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;
&#13;
&#13;

检查一下。