Question

指向problem 的链接：

在jQuery Dialog中使用.scrollTop()方法对我来说不起作用，HTML标记是这样的：

<div id="toogleMAmaximized" style="background:#000000">
     <div id="missionsMinimized" style="display:none;margin-top:10px;margin-bottom: 10px;cursor:pointer"><img src="images/missionsMinimized.png" alt="missions"/></div>
     <div id="achivmentsMinimized" style="display:none;margin-top:5px;cursor:pointer">        <img src="images/achivmentsMinimized.png" /></div>
     <div id="missions" class="unselected MAmaximized"></div>
     <div id="achivments" class="unselected MAmaximized"></div>
     <div id="dataMA" style="position:absolute;top:10px;right:10px;display:none;width:850px;height:500px;background-image: url('images/background-home.png') ; overflow-y:scroll"></div>
</div>

我使用JavaScript函数填充dataMA div。

        function populateMissionsData(){    
             $('#missions').empty();
             $('#dataMA').append('<h1 style="color:white">Current Missions:</h1>');
             for (var $key in missionData['current']){
                 $('#dataMA').append(missionData['current'][$key]);
             }
             $('#dataMA').append('<h1 style="color:white">Not started missions:</h1>');
             for (var $key in missionData['other']){
                 $('#dataMA').append(missionData['other'][$key]);
             }
             $('#dataMA').append('<h1 style="color:white">Ccompleted Missions:</h1>');
             for (var $key in missionData['completed']){
                 $('#dataMA').append(missionData['completed'][$key]);
             }
        }

这很有效，因为我的数据MA填充没有问题。现在我有一个按钮，可以扩展使用livequery插件的dataMA内div的内容，这里是滚动问题：

        $(".plus").livequery('click',(function(){
              key = $(this).attr('key').toString();           
              $('#data'+ key).slideToggle('fast');

              //this is the problem, it does not scroll the dialog.
              $('#dataMA').scrollTop($('#data'+ key).offset().top);
              //Update - this does not work either
              $('#dataMA').scrollTop($('#dataMA')[0].scrollHeight);                        
              //Update 100 - This is not working either
              $('#dataMA').scrollTop($('#data'+ key).offset().top - $('#dataMA').offset().top + $('#dataMA').scrollTop());
              $(this).toggleClass('less')
              if($(this).hasClass('less')){
                   $(this).attr('src','images/less.png');
              }else{
                   $(this).attr('src','images/plus.png');
              }
          }));

当我触发加号按钮时，它不会进行滚动，但是当我再次单击加号按钮时，它会向下滚动并向上滚动。

我已使用dataMA更改了toogleMAmaximized选择器，它滚动但不是预期的（它向内移动了内容）

更新1 如果您有兴趣，我的环境： jQuery v1.7.1 jQuery UI 1.8.16 liveQuery 1.1.1

更新2 我将我的环境更新为jQuery（1.7.2）和jQuery UI（1.8.21）的最新版本，并遇到同样的问题。

更新3 好的，我有一个fiddle文件供你们查看问题。我无法在我的小屏幕上做到这一点，希望你们能让它变得更好。首先是单击右侧的图像，然后单击第一个方块。要查看滚动问题，请单击标题上的任何非加载图标（它们具有plus类）。 dataMA变量将我的查询替换为数据库，该数据库返回结果我在那里放置的字符串。我使用livequery，因为在使用.on()请求添加的代码上使用.post()时出现了很多问题。

jsfiddle

更新4 任何分辨率高于1300x768的人都可以告诉我他们是否正确获得了jsfiddle文件？我还没能解决这个问题。

更新5

我可以滚动几个元素，但是当元素位于被讨论的div之外时它不会滚动到，但是如上所述当我再次按下按钮时它会尝试向上滚动。

更新6

我更新了jsfiddle以便更好地理解，程序是一样的：点击图片 - ＆gt;对话框弹出 - ＆gt;点击任务 - ＆gt;向下滚动到最后一个（厚墙） - ＆gt;点击右边的丢失图像（我不知道它为什么不显示替代内容）这样做会显示隐藏内容，再次点击它会隐藏它。但是，自动滚动没有完成。

Answer 1

不是真正的答案，但看不到代码的模糊，以找到评论链接。

无论如何......我也是struggling to use .scrollTop() inside jQuery UI Dialog。我也发布了一个Fiddle，希望证明我无法理解使其工作所需的代码。在那里，您将看到一个工作对话框，以及一些简短的代码，清楚地展示了我失败的尝试。

我不认为屏幕分辨率与你在jsFiddle上的麻烦有关。相反，我怀疑你的代码远离其预期的上下文，因为它通常是不完整的 - 没有完全破坏 - 但没有从其预期的上下文中充分删除，以便让愿意的眼睛看到麻烦点。 Waayyy太多的代码来排序传递，以帮助你解决问题。

我建议你尝试在你的开发平台上嘲笑它除了一切但相关的位（例如一个对话框以及调用scrollTop（）的原因和方法）。然后，当你仍然无法使它工作时，在这里或在jsFiddle上发布被剥离的代码然后请求帮助。（只是我的两分钱。）

Answer 2

我终于明白了我的问题所在。我试图在slideToggle()效果完成之前进行滚动！我需要做的就是像这样调用滚动：

$('#data'+ key).slideToggle('fast',function(){
    $('#dataMA').scrollTop($('#data'+ key).offset().top - $('#dataMA').offset().top + $('#dataMA').scrollTop());
});

以下是solution

如何在jQuery UI Dialog中使用.scrollTop（）？

2 个答案: