Solvedsimplebar Scroll to bottom
✔️Accepted Answer
@sotirislp I had the same problem and figured out it can bo solved using direct reference to content wrapper (element.SimpleBar and element.getScrollElement() didn't work for me -> undefined properties/function).
var container = document.querySelector('#my-element .simplebar-content-wrapper'); container.scrollTo({ top: 500, behavior: "smooth" });
Other Answers:
Hey guys,
You should be able to do this like so, for example:
var el = new SimpleBar(document.getElementById('myElement'));
el.getScrollElement().scrollTop = 100 // for vertical scrolling
If you used SimpleBar with just data-simplebar, you can do like this:
document.querySelectorAll('#your-element').SimpleBar.getScrollElement()
...
for horizontal scrolling, you can do: el.getScrollElement('x').scrollLeft(100)
Btw this is documented there.
I'm working on improving the documentation with examples because I have to admit it's pretty bad right now! :)
For anyone using the Vue plugin this worked for me:
this.$refs.myRefName.SimpleBar.getScrollElement().scrollTop = 100
Hey Grsmto, Thank you very much for all the effort you have put into this. I am trying to use this 'scroll to bottom' feature.. I initiate simplebar with data-simplebar , so I am trying this solution...
document.querySelectorAll('#my-element').SimpleBar.getScrollElement().scrollTop = 100;
but I get a TypeError..
some info:
#my-element is the div that has the data-simplebar.
i use simplebar with script tag. (not a vue,angular,react app)
it is a web app built with just html,css,js,php
so far simplebar works excellent!
I would appreciate some help.
Thanks in advance.
Hi there,
i love your script, it works really well. I use simplebar within a modal with a limited height. So, wenn i put some content dynamically to the modal, the user doesn't see it at the first time. So i want to "scroll to bottom" the simplebar.
How can i do this? I thinks thats a really good feature and hope you can help!
Thanks!