0

I know that there are many questions like that, but I couldn't find a solution to my problem.

In my single page application(with metro style) when I go back from a widget to home I would like to set the scroll position back where it was before entering the widget.

<div id="overflow" class="mCustomScrollbar _mCS_9" style="width: 1855px;">
   <div id="mCSB_9" class="mCustomScrollBox mCS-jmsHorizontalScrollbar mCSB_horizontal mCSB_inside" style="max-height: none;" tabindex="0">
      <div id="mCSB_9_container" class="mCSB_container" style="position: relative; top: 0px; left: 0px; width: 8360px;" dir="ltr">
         <div class="page" id="dashboard_all" style="width: 8360px;">
         </div>
      </div>
      <div id="mCSB_9_scrollbar_horizontal" class="mCSB_scrollTools mCSB_9_scrollbar mCS-jmsHorizontalScrollbar mCSB_scrollTools_horizontal" style="display: block;">
         <a href="#" class="mCSB_buttonLeft" oncontextmenu="return false;" style="display: block;"></a>
         <div class="mCSB_draggerContainer">
            <div id="mCSB_9_dragger_horizontal" class="mCSB_dragger" style="position: absolute; min-width: 30px; display: block; width: 403px; max-width: 1805px; left: 0px;" oncontextmenu="return false;">
               <div class="mCSB_dragger_bar"></div>
            </div>
            <div class="mCSB_draggerRail"></div>
         </div>
         <a href="#" class="mCSB_buttonRight" oncontextmenu="return false;" style="display: block;"></a>
      </div>
   </div>
</div>

This is the code that the plugin creates when I apply it to the div #overflow

$(document).ready(function() {
   $("#overflow").mCustomScrollbar({
          axis:"x",
          theme:"jmsHorizontalScrollbar",
          scrollButtons: {
           enable: true
          },
          scrollInertia: 950,
    callbacks:{
     onScroll:function(){ 
      //this functions sets the value in another js file. -(this.mcs.left) to get a positive value
      getNavigator().setScrollLeft(-(this.mcs.left));
     },
     alwaysTriggerOffsets:false
    }
        });
  })

Then I use the position found in the callback like that

$("#overflow").mCustomScrollbar("scrollTo",scrollLeft);

But nothing happens. If I try to put a value like 3000, sometimes #overflow scrolls, but the scrollbar stays at the initial position.

Thank you in advance, Matteo

Matteo Trapani
  • 11
  • 2

1 Answers1

0

I did it! I used the scrollTo method in the onUpdate callback

onUpdate:function(){
  $("#overflow").mCustomScrollbar('scrollTo',position, {
    // scroll as soon as clicked
    timeout:0,
    // scroll duration
    scrollInertia:0,
  });
}
Matteo Trapani
  • 11
  • 2
  • Side note: scrollInertia: 0 works, but I found the scrollto does not scroll to the correct position when adding a value to scrollInertia. If it's not working for you, give scrollIInertia:0 a try. – Ron Ross Apr 22 '22 at 19:29