Simplebar: Scroll to bottom

[fusionsquare]

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!

[maitrungduc1410]

I'm now wondering exact question like you, tried few ways but not works. Hope to see a great solution!

[maitrungduc1410]

Actually in scrollbar object has a function called scrollX, I tried but nothing happen, you can give it a try :)

[fusionsquare]

@maitrungduc1410 I already try that, but it doesn't work :(

[Grsmto]

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! :)

[ducqui]

Can also be:
el.getScrollElement().scrollTo(0, 100);

[sotirislp]

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.

[kgkg]

@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" });

[Grsmto]

If what I wrote doesn't work it's probably because you are using v4.3.0-alpha.0 which does not have anymore the SimpleBar object attached to the DOM node.
You should do SimpleBar.instances.get(document.querySelector('#my-element)[0]) instead.

But @kgkg solution works fine otherwise.

[InfantAjayVenus]

I tried the solution you suggested and it worked for the purpose. But now that I've set scrollTop I couldn't scroll using mouse or drag he scrollbar.

I'm using simplebar-4.2.3, with angular 8. I included simplebar to my project following these instructions .

I'm updating the scrollTop value like below

this.scrollElement.getScrollElement().scrollTop=this.scrollElement.getScrollElement().scrollHeight;

where scrollElement is the SimpleBar instance.

[Grsmto]

@InfantAjayVenus I'm not sure, this might come from your setup, it seems to work when I try with our CodeSandbox template here.

[juliandreas]

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" });

This worked for me.

[ItsMattLawson]

@Grsmto I'm trying to scroll to the bottom with the angular wrapper.
I'm using the below approach ( simplified ) - which works perfectly in a normal <div>

<ngx-simplebar>
    <div #scrollMe [scrollTop]="scrollMe.scrollHeight">
      <messages *ngFor="let message of ( transcript$ | async );></messages>
   </div>
</ngx-simplebar>

I really want the beauty of the scroll bar! Any help on this one could be greatly appreciated

[Abdou1283]

For me i m using jquery for smooth scrolling with simplebar, it's very nice tool:
var element=document.getElementById('my-element').SimpleBar.getScrollElement(); element.scrollTo({ top: 0, behavior: "smooth" });
or
$(element).animate({scrollTop: 0}, "slow");

and to get the scroll position when user scrolling:
var element=document.getElementById('my-content').SimpleBar.getScrollElement();
$(element).scroll(function () {
if ($(this).scrollTop() > 100) {
// Show the Back to top element
$('.....').fadeIn();
} else {
// Hide the Back to top element
$('.....').fadeOut();
}

[frakay100]

If anyone is using the angular wrapper I thought I would add the solution to scroll to bottom as there is not one here.

// add an Input id in your template

// Add ()Input in your component class

@ViewChild('scrollMe')
public myScrollContainer: ElementRef;

// Then your function

scrollToBottom(): void {

this.myScrollContainer['SimpleBar'].getScrollElement().scrollTop = this.myScrollContainer['SimpleBar'].getScrollElement().scrollHeight

}

[joshmakar]

@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" });

Thank you thank you thank you!

[matthewblewitt]

For anyone using the Vue plugin this worked for me:

this.$refs.myRefName.SimpleBar.getScrollElement().scrollTop = 100