Issue
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.
Solution
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.)
Answered By - Michael G
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.