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

Question

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.

if you can add a small working fiddle showing what you are trying to achieve then it will make our life easy to answer as well. else we have to assume and imagine a lot of things :) — sandeep joshi, Sep 09 '20 at 16:03
Can you take a look at [this question](https://stackoverflow.com/questions/635706/how-to-scroll-to-an-element-inside-a-div)? I think it should help. Happy coding :) — ShinaBR2, Sep 09 '20 at 16:07

score 2 · Accepted Answer · edited Sep 10 '20 at 12:18

2

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

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

trigger functions with your up/down buttons.

edited Sep 10 '20 at 12:18

Sandrin Joy

1,120
10
28

answered Sep 09 '20 at 16:09

Paun Narcis Iulian

779
7
15

score 0 · Answer 2 · answered Sep 09 '20 at 16:34

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/

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

2 Answers2