0

Is there any way to make a scrollbar move using a button in JavaScript/jQuery? I have taken the screenshot from google Sheets; they have that option, but I don't how I can do the same.

Same image, but close up:

Michael M.
  • 10,486
  • 9
  • 18
  • 34
ChampionSemi SEO
  • 142
  • 4
  • 2
    Yes it is, but please show us what you have tried. Remember that Stack Overflow is not a coding service. – Carsten Løvbo Andersen Sep 29 '21 at 12:30
  • There will be many ways to accomplish this. To be able to help, we will need a Minimal, Reproducible Example: https://stackoverflow.com/help/minimal-reproducible-example – Twisty Sep 29 '21 at 14:26

1 Answers1

0

They are probably doing something like this:

First, you'll need to hide the default scrollbars, as per this question.

Next, you'll need to implement your own scrollbars, for example something like this project on GitHub.

Finally, when implementing your scrollbars, create buttons, (perhaps using a <button> tag). In the button click handler, change .scrollTop or .scrollLeft to scroll the element incrementally.

For example:

document.getElementById( "my-scroll-left-button" ).onclick = () => {

    document.getElementById( "my-scroll-container" ).scrollLeft += 30;

}

document.getElementById( "my-scroll-right-button" ).onclick = () => {

    document.getElementById( "my-scroll-container" ).scrollLeft -= 30;

}

document.getElementById( "my-scroll-up-button" ).onclick = () => {

    document.getElementById( "my-scroll-container" ).scrollTop -= 30;

}

document.getElementById( "my-scroll-down-button" ).onclick = () => {

    document.getElementById( "my-scroll-container" ).scrollTop += 30;

}

Be warned: If you are using CSS scroll-snapping, manually changing .scrollTop and .scrollLeft might cause issues in some browsers. (I wouldn't worry about it though, since scroll-snapping is not usually a critical feature.)

Michael G
  • 458
  • 2
  • 9
  • this is working perfectly but bottom option is not working. kindly check below code and let me know the answer. document.getElementById( "my-scroll-top-button" ).onclick = () => { document.getElementById( "content-container" ).scrollTop += 30; } document.getElementById( "my-scroll-buttom-button" ).onclick = () => { document.getElementById( "content-container" ).scrollBottom -= 30; } – ChampionSemi SEO Sep 30 '21 at 07:26
  • 1
    Edited to include `.scrollTop` usage. There is no `.scrollBottom`, but you were very close. – Michael G Sep 30 '21 at 13:27