Question

我创建了一个带有滚动的可拖动div（创建滚动我使用的jquery插件名为：nicescroll ver.2.9.2）但滚动无法正常工作。

在将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>

Answer 1

我找到了一个结果...... 移动div之后我必须重新加载滚动，为了做到这一点我可以使用函数：getNiceScroll（）。resize（）（我没有找到函数：reload（）或者像这样的函数）

最好在移动过程中隐藏滚动，这样您就不会看到移动div和realoading滚动之间的延迟。隐藏和显示我使用的滚动：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，你可以在不同的位置看到滚动。

Answer 2

如何摆脱Nicescroll并使用CSS overflow属性？请根据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。

Nicescroll在一个可拖动的div中

2 个答案: