angular-slimscroll icon indicating copy to clipboard operation
angular-slimscroll copied to clipboard

Update scrollbar after pushing elements

Open agranig opened this issue 10 years ago • 2 comments

Hi, I'm pushing children into the container having a slimscroll toolbar and would like to do a scrollTo: $bottom afterwards in my controller, like so:

$scope.mycontent.push(newelem); // update myscrollwindow to scroll to bottom: var scrollDiv = jQuery('#mycontainer'); var scrollToVal = scrollDiv.prop('scrollHeight') + 'px'; scrollDiv.slimScroll({ scrollTo : scrollToVal });

This obviously doesn't work as the height is not yet updated because the dom is not re-rendered at that point. Any idea how I would update slimscroll right after pushing elements?

agranig avatar Aug 24 '15 15:08 agranig

I figured out the part how to trigger a refresh in order to scroll to the bottom of my container div.

HTML: <div id="mycontainer" slimscroll="slimscrollOpts"><!-- put my elements here --></div>

Controller: $scope.slimscrollOpts = { /* my usual initialization opts for slimscroll */ } // other code goes here $scope.mycontent.push(newelem); $scope.slimscrollOpts.scrollTo = myEndPosition;

At least this makes my container to always jump to the bottom with a proper myEndPosition being set, as there is a watcher on the slimscrollOpts.

However, the rail bar on the right is not updated, and if I hover it, it shows my initial position. Any idea how to update/redraw that part properly?

agranig avatar Aug 25 '15 09:08 agranig

@agranig Thanks for your post, and I checked the source code of slimscroll, when you pass the scrollTo in the options, slimscroll jump to the content, and ignore the scroll bar, from line 120 to 140:

              if ('scrollTo' in options)
              {
                // jump to a static point
                offset = parseInt(o.scrollTo);
              }
              else if ('scrollBy' in options)
              {
                // jump by value pixels
                offset += parseInt(o.scrollBy);
              }
              else if ('destroy' in options)
              {
                // remove slimscroll elements
                bar.remove();
                rail.remove();
                me.unwrap();
                return;
              }

              // scroll content by the given offset
              scrollContent(offset, false, true);

I think set true to the the second parameter and false to the third parameter of scrollContent, then your problem will be solved, but you need your own copy of slimscroll or raise a merge request to slimscroll.

ziscloud avatar Sep 08 '15 01:09 ziscloud