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

发布于 2024-08-17 16:22:25 字数 467 浏览 4 评论 0原文

当重新打开模式对话框时，如何保持可滚动 div 的滚动位置？

我修改了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>

原文

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

I modified the basic downloadable example of simplemodal as follows:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

做个少女永远怀春 2024-08-24 16:22:25

我使用 Simple Modal 测试了此解决方案，它有效

如果您使用的是基本对话框演示，只需更改此代码的 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();
      }
    });
  });
});

I tested this solution with Simple Modal and it works

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:

$(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();
      }
    });
  });
});

回复收藏 0 原文

~没有更多了~