mCustomScrollbar" scrollTo"不在单页面应用程序中工作

时间:2016-03-24 17:18:10

标签: javascript jquery html scrollbar mcustomscrollbar

我知道有很多这样的问题,但我无法找到解决问题的方法。

在我的单页应用程序(带有metro风格)中,当我从小部件返回到主页时,我想将滚动位置设置回到进入小部件之前的位置。



<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>
&#13;
&#13;
&#13;

这是插件在将其应用于div #overflow

时创建的代码

&#13;
&#13;
$(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
				}
		      });
		})
&#13;
&#13;
&#13;

然后我使用回调中找到的位置

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

但没有任何反应。 如果我尝试设置像3000这样的值,有时 #overflow 会滚动,但滚动条会保持在初始位置。

提前谢谢你, 利玛

1 个答案:

答案 0 :(得分:0)

我做到了!我在onUpdate回调中使用了scrollTo方法

onUpdate:function(){
  $("#overflow").mCustomScrollbar('scrollTo',position, {
    // scroll as soon as clicked
    timeout:0,
    // scroll duration
    scrollInertia:0,
  });
}