1

问题链接：

在 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 函数来填充dataMAdiv。

        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 如果你有兴趣，我的环境： jQueryv1.7.1 jQuery UI1.8.16 liveQuery1.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以便更好地理解，过程是一样的：点击图片->弹出对话框->点击任务->向下滚动到最后一个（厚墙）->点击丢失的图片到对（我不知道为什么它不显示 alt 内容）这样做会显示一个隐藏的内容，再次单击它会隐藏它。然而，自动滚动没有完成。

4

2 回答 2

1

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

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

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

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

于 2012-06-14T13:39:21.110 回答
1

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

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

这是解决方案

于 2012-07-02T14:24:40.380 回答