Question

我想使用CSS创建全屏窗口，我已经看到this question。

我的问题是我的全屏窗口很长，并且在主页内有一个滚动条...可以创建一个全屏窗口，使我只能看到一个滚动条吗？（即在打开全屏窗口时使用主滚动条）

.fullScreenWindow {
  display: none;
}

.fullScreenWindow.show {
  background-color: lightgrey;
  display: block;
  position: fixed;
  padding: 10px;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 100;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<body>
  <button onclick="toggleWindow();">toggle window</button>
  <div class="fullScreenWindow">
    <br/><br/>
    <h1> full screen window start</h1>
    <br/><br/><br/><br/><br/><br/><br/><br/>
    <h3>getting 2 scroll bars</h3>
    <br/><br/><br/><br/><br/><br/><br/><br/>
    <button onclick="toggleWindow();">close</button>
    <h1> full screen window end</h1>
    <br/><br/>
  </div>
  <h4> some long page ...</h4>
  <br/><br/><br/><br/>
  <h4> some long page ...</h4>
  <br/><br/><br/><br/>
  <h4> some long page ...</h4>
  <br/><br/><br/><br/>
  <h4> some long page ...</h4>
  <br/><br/><br/><br/>
  <h4> some long page ...</h4>
  <br/><br/><br/><br/>
</body>
</html>

{{1}}

Answer 1

从逻辑角度看

这是一个动态过程，body有一个滚动条，而Full Screen有一个滚动条，您想在body显示时隐藏Full Screen滚动条。因此，有很多解决方案，我只举一个例子：

设置基本样式：

    html, body {
      height: 100vh;
      width: 100vw;
    }

在Full Screen显示时更改正文滚动条

function toggleWindow() {
  $('.fullScreenWindow').toggleClass('show');
  $('body').css({"overflow": "hidden"})
}

从实施的角度来看

这是一个非常常见的要求，无论您的模式是否为全屏模式，我们网站上的每个警报模式都具有此功能。有大量的库可以做到这一点，例如：

Bootstrap css样式框架，但也具有一些非常实用的JS组件

Ant Design，其中包含各种组件。

SweetAlert2专注于警报组件

它们具有更好的兼容性和样式，您可以尝试

创建一个全屏弹出窗口并更新滚动条

1 个答案: