0

is there any way to make scrollbar moving button using javascript/jquery.i have taken screenshot from google sheet they have that option but i am not able to get how i can do the same.

Example Image

expamle image with zoom

ChampionSemi SEO
  • 144
  • 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
  • 296
  • 1
  • 6
  • 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