1

我用滚动创建了一个可拖动的 div(为了创建滚动,我使用了名为:nicescroll ver. 2.9.2 的 jquery 插件),但是滚动不能正常工作。

一切都很好,直到我将 div 移动到不同的位置。当我移动 div 时,滚动保持在旧位置。

一开始我使用自定义滚动,没有问题。问题是当我使用 nicescroll 插件时。

  $(document).ready(function()
  {
    $('#title').hover(function() // when mouse is on the #title do:
      { 
        $('#window').draggable({ disabled: false }); // make window "draggable"
      }, function() // when mouse is out of the #title do:
      { 
        $('#window').draggable({ disabled: true }); // make window "un-draggable" 
      }
    ); // endhover
    $("#window_content").niceScroll({boxzoom:false}); // adding the scroll
  }); // end ready

我的 div 结构是:

  <div id="window">
    <div id="title"> </div> <!-- When mouse is on the div window is draggable -->
    <div id="window_content"> 
      This div have a scroll...
    </div> 
  </div> 
4

2 回答 2

1

我找到了一个结果......在移动 div 之后我必须重新加载滚动,为此我可以使用函数:getNiceScroll().resize()(我没有找到像这样的函数:reload() 或 sth)

最好在移动过程中隐藏滚动,这样您就不会看到移动 div 和重新加载滚动之间的延迟。为了隐藏和显示滚动,我使用了:getNiceScroll().hide() 和 getNiceScroll().show()

代码是:

$(document).ready(function()
{
  $('#title').hover(function() // when mouse is on the #title do:
    {
      $('#window_content').getNiceScroll().hide(); //hide scroll
      $('#window').draggable({ disabled: false }); // make window "draggable"
    }, function() // when mouse is out of the #title do:
    { 
  $("#window_content").getNiceScroll().resize();  // preload scroll
      $('#window_content').getNiceScroll().show();  // show scroll
      $('#window').draggable({ disabled: true }); // make window "un-draggable" (turn off the draggable)
  }); // endhover
  $("#window_content").niceScroll({boxzoom:false}); // adding the scroll
}); // end ready

这不是完美的分辨率,因为如果您快速移动 div,您可以在不同的位置看到滚动。

于 2012-06-14T23:03:15.927 回答
0

摆脱 Nicescroll 并使用 CSSoverflow属性怎么样?根据您在http://jsfiddle.net/Hfc6q/1/上的代码查看此示例。

jQuery:

 $(document).ready(function()
  {
    $('#title').hover(function() // when mouse is on the #title do:
      { 
        $('#window').draggable({ disabled: false }); // make window "draggable"
      }, function() // when mouse is out of the #title do:
      { 
        $('#window').draggable({ disabled: true }); // make window "un-draggable" 
      }
    ); // endhover
  }); // end ready​

CSS:

#window_content
{
   overflow: scroll;
   width: 100px;
   height: 100px;
}

#title { width: 100px; }

您可能还需要设置标题的宽度div以匹配 window_content div

于 2012-06-14T17:21:10.530 回答