2. Algorithm
  3. javascript - scroll visible part of overflown div inside smaller div without jquery - Stack Overflow

javascript - scroll visible part of overflown div inside smaller div without jquery - Stack Overflow

admin2025-04-18  0

I´m currently trying to move a wider div B horizontally inside an smaller <div> A using two buttons.
I found a similar problem using jquery, but doesn´t want to use the library just for this section in the code.

Here is the fiddle

I want to scroll the visible field of view using a 'left' and 'right' button to move the field 100px in either direction without using jquery but with pure Javascript, HTML and 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>

I´m currently trying to move a wider div B horizontally inside an smaller <div> A using two buttons.
I found a similar problem using jquery, but doesn´t want to use the library just for this section in the code.

Here is the fiddle

I want to scroll the visible field of view using a 'left' and 'right' button to move the field 100px in either direction without using jquery but with pure Javascript, HTML and 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>

  • javascript
  • html
  • css
Share asked Nov 29, 2017 at 14:31 JohnDizzleJohnDizzle 1,3484 gold badges26 silver badges58 bronze badges 2
  • 1 You mean animate the scrolling or simply jump to the next div scroll position? – FcoRodr Commented Nov 29, 2017 at 14:34
  • @FcoRodr for the first step it will be enough if the div jumps 100px to the left/right, but if it´s animated it would be even better. I will do the animations either using plain CSS or using ngAnimate – JohnDizzle Commented Nov 29, 2017 at 14:36
Add a ment  | 

5 Answers 5

Reset to default 3 

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>

Well that is very easy if you modify the writable scrollLeft property:

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>

Updated your snippet so it no longer needs jQuery, and added buttons

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>

Take a look at this css approach.

Update : Added 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>

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>

Check this out.

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1744931394a275177.html

javascriptscroll visible part of overflown div inside smaller div without jqueryStack Overflow

最新回复(0)