CODEWITHSUNDEEP
javascripthtmlcssreactjs
FinnWithIt
FinnWithIt

Reputation: 65

How to scroll a fixed area only, not the whole page onClick?

Basically, I have a fixed position div that I need to scroll on click but not the whole page. There is a div containing a list of items and up/down buttons to the right of it. The page itself does not scroll but the div of items can scroll (overflow-y: scroll) and I want to do that on a click. Is there a way to do this? Sorry if my question is not clear enough!

Edit: Here is a link to a fiddle: https://jsfiddle.net/yjphLeg0/4/

When the 'up' button is clicked I want the div with and id of 'div' to scroll up and the same for the 'down' button and down.

Upvotes: 1

Views: 143

Answers (2)

Paun Narcis Iulian
Paun Narcis Iulian

Reputation: 799

function move_down() {
document.getElementById('mydiv').scrollTop += 10;
}

function move_up() {
document.getElementById('mydiv').scrollTop -= 10;
}

trigger functions with your up/down buttons.

Upvotes: 2

nclskfm
nclskfm

Reputation: 212

function scrollWithin(wrapperElementId, innerElementId) {
  // get the inner element
  var innerElement = document.getElementById(innerElementId);
  // calculate the offset top to to wrapper element plus the element height
  var topPos = innerElement.offsetTop + (innerElement.offsetHeight / 2);
  // zoom the wrapper element to the inner element
  document.getElementById(wrapperElementId).scrollTop = topPos;
}

scrollWithin('scrollable', 'item3');

hope I got your point. Here is a fiddle to test: https://jsfiddle.net/ukhzxs59/

Upvotes: 0

Related Questions