AllyDialog模态框打开时默认定位至顶部的需求及问题

当a11y-dialog模态框包含大量内容时，关闭后再次打开会停留在之前滚动的位置，要实现每次打开默认回到顶部，只需监听模态框的show事件，在事件触发时将内容容器的滚动条重置到顶部。

修改后的完整代码： #

<!DOCTYPE html>
<html>
  <head>
    <title>a11y-dialog (v7) demo</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./src/styles.css" />
  </head>

  <body>
    <main>
      <h1>a11y-dialog</h1>

      <p>
        <button class="link-like" data-a11y-dialog-show="my-dialog">
          <span>Open the dialog window</span>
        </button>
      </p>
    </main>

    <div
      class="dialog-container"
      id="my-dialog"
      aria-hidden="true"
      aria-labelledby="my-dialog-title"
      aria-describedby="my-dialog-description"
    >
      <div class="dialog-overlay" data-a11y-dialog-hide></div>
      <div class="dialog-content" role="document">
        <button
          data-a11y-dialog-hide
          class="dialog-close"
          aria-label="Close this dialog window"
        >
          <svg class="svg-icon" viewBox="0 0 20 20">
            <path
              fill="currentcolor"
              d="M15.898,4.045c-0.271-0.272-0.713-0.272-0.986,0l-4.71,4.711L5.493,4.045c-0.272-0.272-0.714-0.272-0.986,0s-0.272,0.714,0,0.986l4.709,4.711l-4.71,4.711c-0.272,0.271-0.272,0.713,0,0.986c0.136,0.136,0.314,0.203,0.492,0.203c0.179,0,0.357-0.067,0.493-0.203l4.711-4.711l4.71,4.711c0.137,0.136,0.314,0.203,0.494,0.203c0.178,0,0.355-0.067,0.492-0.203c0.273-0.273,0.273-0.715,0-0.986l-4.711-4.711l4.711-4.711C16.172,4.759,16.172,4.317,15.898,4.045z"
            ></path>
          </svg>
        </button>

        <h1 id="my-dialog-title">Subscribe to our newsletter</h1>

        <p id="my-dialog-description">
          It is a long established fact that a reader will be distracted by the
          readable content of a page when looking at its layout. The point of
          using Lorem Ipsum is that it has a more-or-less normal distribution of
          letters, as opposed to using 'Content here, content here', making it
          look like readable English. Many desktop publishing packages and web
          page editors now use Lorem Ipsum as their default model text, and a
          search for 'lorem ipsum' will uncover many web sites still in their
          infancy. Various versions have evolved over the years, sometimes by
          accident, sometimes on purpose (injected humour and the like). It is a
          long established fact that a reader will be distracted by the readable
          content of a page when looking at its layout. The point of using Lorem
          Ipsum is that it has a more-or-less normal distribution of letters, as
          opposed to using 'Content here, content here', making it look like
          readable English. Many desktop publishing packages and web page
          editors now use Lorem Ipsum as their default model text, and a search
          for 'lorem ipsum' will uncover many web sites still in their infancy.
          Various versions have evolved over the years, sometimes by accident,
          sometimes on purpose (injected humour and the like). It is a long
          established fact that a reader will be distracted by the readable
          content of a page when looking at its layout. The point of using Lorem
          Ipsum is that it has a more-or-less normal distribution of letters, as
          opposed to using 'Content here, content here', making it look like
          readable English. Many desktop publishing packages and web page
          editors now use Lorem Ipsum as their default model text, and a search
          for 'lorem ipsum' will uncover many web sites still in their infancy.
          Various versions have evolved over the years, sometimes by accident,
          sometimes on purpose (injected humour and the like).
        </p>
      </div>
    </div>

    <script src="src/index.js"></script>
    <script>
      // 初始化对话框并监听show事件
      document.addEventListener('DOMContentLoaded', () => {
        const dialog = new A11yDialog(document.getElementById('my-dialog'));
        
        dialog.on('show', () => {
          const contentContainer = document.querySelector('.dialog-content');
          contentContainer.scrollTop = 0;
        });
      });
    </script>
  </body>
</html>

关键说明： #

• 通过dialog.on('show', ...)监听模态框的显示事件
• 在事件回调中，找到模态框的内容容器.dialog-content，将其scrollTop属性设置为0，强制滚动条回到顶部

内容的提问来源于stack exchange，提问作者sudar