如何在SimpleModal对话框中保持滚动位置

How is it possible to keep the scroll position of a scrollable div within a modal dialog when it is re-opened?

在重新打开时,如何将可滚动div的滚动位置保持在模态对话框中?

I modified the basic downloadable example of simplemodal as follows:

我修改了simplemodal的基本可下载示例,如下所示:

<div id="basic-modal-content">
    <h3>Scrollable Modal Dialog</h3>
    <div style="width: 150px; height:100px; overflow: auto;">
        a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    </div>
</div>

1 个解决方案

#1

I tested this solution with Simple Modal and it works

我使用Simple Modal测试了这个解决方案并且它可以工作

If you are using there Basic Dialog demo, just change out the basic.js file for this code. It just gets the scrollTop before the dialog closes, and resets it when the dialog reopens. We have to call the full selector for the div each time because of how SimpleModal works:

如果您使用的是Basic Dialog演示,只需更改此代码的basic.js文件即可。它只是在对话框关闭之前获取scrollTop,并在对话框重新打开时重置它。由于SimpleModal的工作原理,我们每次都必须调用div的完整选择器:

$(document).ready(function () {
  var scrollTop = null;
  $('#basic-modal input.basic, #basic-modal a.basic').click(function (e) {
    e.preventDefault();
    $('#basic-modal-content').modal({
      onShow: function(){
        if(scrollTop !== null) $('#basic-modal-content > div').scrollTop(scrollTop);
      },
      onClose: function(){
        scrollTop = $('#basic-modal-content > div').scrollTop();
        $.modal.close();
      }
    });
  });
});