如何在 jQuery UI 对话框中使用 .scrollTop()？答案

【问题标题】：How to use .scrollTop() inside jQuery UI Dialog?如何在 jQuery UI 对话框中使用 .scrollTop()？
【发布时间】：2012-06-12 16:08:45
【问题描述】：

链接到problem：

在 jQuery 对话框中使用 .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]);
             }
        }

这很好用，因为我可以毫无问题地填充我的 dataMA。现在我有一个按钮，可以扩展 dataMA 中使用livequery 插件的 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 UI1.8.16 liveQuery1.1.1

更新 2 我将环境更新为最新版本的jQuery (1.7.2) 和jQuery UI (1.8.21)，仍然遇到同样的问题。

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

jsfiddle

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

更新 5

我可以滚动几个元素，但是当它在包含的 div 之外的元素时，它不会滚动到，但是如上所述，当我再次点击按钮时，它会尝试向上滚动。

更新 6

为了更好的理解我更新了jsfiddle，过程是一样的：点击图片->弹出对话框->点击任务->向下滚动到最后一个（厚墙）->点击缺少的右边的图像（我不知道为什么它不显示 alt 内容）这样做会显示一个隐藏的内容，再次单击它会隐藏它。但是自动滚动没有完成。

【问题讨论】：

试试 $("#container").scrollTop($("#container")[0].scrollHeight);
@DhirajBodicherla 它和 .offset().top 做同样的事情
尝试创建 jsfiddle.net。您提供的代码不完整。此外，根据您的要求，您可以使用本机 jquery 函数而不是“livequery”
@r0m4n 按照建议完成。谢谢。

标签： jquery jquery-ui dialog scrolltop

【解决方案1】：

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

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

我认为屏幕分辨率与您在 jsFiddle 上的问题无关。相反，我怀疑您的代码与其预期的上下文相去甚远，以至于通常是不完整的 - 没有完全破坏 - 但没有从其预期的上下文中充分删除，以使有意愿的眼睛可以看到故障点。 Waayyy 代码太多，无法通过合理的努力来帮助您解决问题。

我建议你尝试在你的开发平台上模拟它，除了相关位（例如一个对话框和一个调用 scrollTop() 的原因和方法）之外的所有东西。然后，当您仍然无法使其工作时，请在此处或在 jsFiddle 上发布精简后的代码，然后寻求帮助。（只是我的两分钱。）

【讨论】：

我为您的问题找到了解决方案，但是该解决方案并不能解决我的问题。

【解决方案2】：

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

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

这里是solution

【讨论】：