Solvedsimplebar Scroll to bottom

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!


19 Answers

✔️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.

Related Issues:

simplebar Scroll to bottom
@sotirislp I had the same problem and figured out it can bo solved using direct reference to content...