确保模式打开时页面保持不可滚动，同时仍保持滚动条可见

问题描述 投票：0回答：1

我试图做到这一点，以便当打开模式时，用户将无法滚动页面。但是，如果我简单地在 

overflow: hidden
上添加 
<body>
，滚动条会很快消失，内容会突然向右移动，看起来相当难看。如何将滚动“冻结”在我当前所在的位置，保持滚动条可见，并确保所有功能，例如，
hide on scroll
上的
<header>
，在带有黑色的模态下底衬不会被触发？

我尝试了不同的方法，其中一种直接将其添加到

<body>
：

position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
overflow-y: scroll;

在这种情况下，滚动条是可见的，我们无法滚动，但是

position: fixed;
使视口在打开模态框时跳转到顶部，因此这种方法并不理想（我不需要任何跳转）。

我使用 Vue，这是我的 App.vue 模板的样子：

<template>
    <div>
        <AppModal></AppModal>
        <AppHeader></AppHeader>
        <AppMain></AppMain>
        <AppFooter></AppFooter>
    </div>
</template>

我正在寻找最简洁的解决方案不涉及JS。

html css vue.js vuejs3 modal-dialog
1个回答
0
投票

首先要重现内容移动的问题，我们需要有一个固定的标题。 （您的问题中缺少这部分）。现在，如果正文变为 

overflow-y:hidden
，滚动条将消失，从而导致标题中的内容发生变化。

修复方法是将标题放在容器内，并在主体失去滚动条时立即出现一个抵消的

overflow-y:scroll
。

btn.onclick = function(ev) {
  document.body.classList.add("fixed")

}

btn2.onclick = function(ev) {
  document.body.classList.remove("fixed")

}
body {
  overflow-y: scroll;
  margin: 0;
}

body.fixed {
  overflow-y: hidden;
}

.header-container {
  top: 0;
  position: sticky;
  pointer-events: none;
  width: 100%;
}

body.fixed .header-container {
  overflow-y: scroll;
}

body .modal {
  display: none;
}

body.fixed .modal {
  display: block;
}

.header {
  width: 100%;
  text-align: center;
  padding: 25px 0;
  top: 0;
  background: yellow;
  box-shadow: 0 0 10px purple;
}

.modal {
  padding: 20px;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 1;
}
<body>


  <div class="header-container">
    <div class="header">
      header

    </div>
  </div>

  <h1>hello world</h1>
  <p>sdflkjsdfl kjsf</p>
  <h1>hello world</h1>
  <p>sdflkjsdfl kjsf</p>
  <h1>hello world</h1>
  <p>sdflkjsdfl kjsf</p>

  <button id="btn">open modal</button>


  <h1>hello world</h1>
  <p>sdflkjsdfl kjsf</p>
  <h1>hello world</h1>
  <p>sdflkjsdfl kjsf</p>
  <h1>hello world</h1>
  <p>sdflkjsdfl kjsf</p>

  <div class="modal">
    <h2>hello i am modal</h2>
    <button id="btn2">close</button>
  </div>

</body>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.