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

<ngx-simplebar #scrollMe>

// 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

[Radikos]

For anyone using the vue plugin today with vue3 (composition API in my example) - the Get methods appear to have disappeared, leaving simple getters in their place:

(I also use https://github.com/Grsmto/simplebar/issues/557 to be able to use simplebar + vue3)

template

  <simplebar ref="scrollable">

vue composition api (typescript)

  setup() {
    const scrollable = ref<typeof Simplebar>();
    const scrollToBottom = () => {
      if (!scrollable.value) return;
      const contentHeight = (scrollable.value.contentElement as Element).clientHeight;
      scrollable.value.scrollElement.scrollTo({
        top: contentHeight,
        behavior: "smooth",
      });
    }
    return {scrollable, scrollToBottom};
  },

[rajendrabadri123]

Working example to find when simplebar scroll reaches its FULL BOTTOM height:

                            const simpleBarActive = new SimpleBar(document.getElementById('activeMessage'));
            simpleBarActive.getScrollElement().addEventListener('scroll', function () {
                var scrolledTop = $(this).scrollTop();
                var offsetHeight = simpleBarActive.getScrollElement().offsetHeight;
                var scrollHeight = simpleBarActive.getScrollElement().scrollHeight;

                if (scrolledTop >= (scrollHeight - offsetHeight)) {
                    // call your ajax function to load next data with page number etc.
                }
            });

Working example to find when simplebar scroll when it reaches its FULL TOP height:

            const simpleBar = new SimpleBar(document.getElementById('activeMessage'));
            simpleBar.getScrollElement().addEventListener('scroll', function () {
                var scrolledTop = ($(this).scrollTop() === 0);
                if (scrolledTop) {
                    // call your ajax function to load previous old data with page number etc.
                }
            });

[RonP3B]

Simple approach in react:

1-Create a ref const scrollBarRef = useRef(null);

2-Set the ref to the SimpleBar component: <SimpleBar ref={scrollBarRef }>

3-Write these lines in a function or useEffect, whatever is your need: if (scrollBarRef.current) { const scrollElement = scrollBarRef.current.contentWrapperEl; scrollElement.scrollTop = scrollElement.scrollHeight; }

[exmmth]

vanilla js scroll bottom

let my_simplebar = SimpleBar.instances.get(document.querySelector('.my_element'));
my_simplebar.getScrollElement().scrollTop = my_simplebar.getScrollElement().scrollHeight;

[SumanKS98]

Simple approach in react:

1-Create a ref const scrollBarRef = useRef(null);

2-Set the ref to the SimpleBar component: <SimpleBar ref={scrollBarRef }>

3-Write these lines in a function or useEffect, whatever is your need: if (scrollBarRef.current) { const scrollElement = scrollBarRef.current.contentWrapperEl; scrollElement.scrollTop = scrollElement.scrollHeight; }

this worked for me. Thanks.