Question

我有一个微调器组件，可以将其添加到页面的不同部分（需要的地方）。微调器始终根据其父项居中。父项处于相对位置，微调器是绝对的。主要问题是某些微调容器是可滚动的。在滚动内容中，微调器不再居中。我知道对于滚动内容，我们可以将位置固定在中心内容上，但是只有在内容应该在整个页面上居中的情况下，它才起作用。

就我而言，是否有可能实现这一目标？示例页面的图像和代码如下。

html,
body {
  height: 98%;
}

.header {
  position: relative;
  overflow: auto;
  height: 26%;
  border: 1px solid grey;
  margin-bottom: 2%;
}

.main {
  display: flex;
  height: 70%
}

.content {
  position: relative;
  overflow: auto;
  width: 70%;
  border: 1px solid grey;
  margin-right: 20px;
}

.side-menu {
  border: 1px solid grey;
  flex-grow: 1;
  position: relative
}

.spinner-wrapper {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.spinner {
  border: 8px solid #f3f3f3;
  border-radius: 50%;
  border-top: 8px solid #3498db;
  width: 60px;
  height: 60px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<body>
  <div class="header">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</br></br></br></br>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</br></br></br></br>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</br></br></br></br>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</br></br></br></br>

    <div class="spinner-wrapper">
      <div class="spinner"></div>
    </div>
  </div>
  <div class="main">
    <div class="content">
      Content

      <div class="spinner-wrapper">
        <div class="spinner"></div>
      </div>
    </div>
    <div class="side-menu">
      Side menu

      <div class="spinner-wrapper">
        <div class="spinner"></div>
      </div>
    </div>
  </div>
</body>

Answer 1

您可以在CSS中添加一个溢出：隐藏，以防止滚动内容。

html,
body {
  height: 98%;
}

.header {
  position: relative;
  overflow: auto;
  height: 26%;
  border: 1px solid grey;
  margin-bottom: 2%;
  overflow: hidden;
}

.main {
  display: flex;
  height: 70%
}

.content {
  position: relative;
  overflow: auto;
  width: 70%;
  border: 1px solid grey;
  margin-right: 20px;
}

.side-menu {
  border: 1px solid grey;
  flex-grow: 1;
  position: relative
}

.spinner-wrapper {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.spinner {
  border: 8px solid #f3f3f3;
  border-radius: 50%;
  border-top: 8px solid #3498db;
  width: 60px;
  height: 60px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<body>
  <div class="header">
    Header

    <div class="spinner-wrapper">
      <div class="spinner"></div>
    </div>
  </div>
  <div class="main">
    <div class="content">
      Content

      <div class="spinner-wrapper">
        <div class="spinner"></div>
      </div>
    </div>
    <div class="side-menu">
      Side menu

      <div class="spinner-wrapper">
        <div class="spinner"></div>
      </div>
    </div>
  </div>
</body>

Answer 2

<Grid component>

let w = screen.width;
w = w/2;
var a = document.getElementById('spinner-wrapper').style.left = w + 'px';

function myFunction() {
  let w = window.innerWidth;
  console.log(w);
  w = w/2;
  console.log(w);
  let a = document.getElementById('spinner-wrapper').style.left = w + 'px';
}

html,
body {
  height: 98%;
}

.header {
  position: relative;
  overflow: auto;
  height: 26%;
  border: 1px solid grey;
  margin-bottom: 2%;
}

.main {
  display: flex;
  height: 70%
}

.content {
  position: relative;
  overflow: auto;
  width: 70%;
  border: 1px solid grey;
  margin-right: 20px;
}

.side-menu {
  border: 1px solid grey;
  flex-grow: 1;
  position: relative
}

.spinner-wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.spinner {
  border: 8px solid #f3f3f3;
  border-radius: 50%;
  border-top: 8px solid #3498db;
  width: 60px;
  height: 60px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Answer 3

请检查

html,
body {
  height: 98%;
}

.header {
  position: relative;
  overflow: auto;
  height: 26%;
  border: 1px solid grey;
  margin-bottom: 2%;
}

.main {
  display: flex;
  height: 70%
}

.content {
  position: relative;
  overflow: auto;
  width: 70%;
  border: 1px solid grey;
  margin-right: 20px;
}

.side-menu {
  border: 1px solid grey;
  flex-grow: 1;
  position: relative
}

.spinner-wrapper {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.spinner {
  border: 8px solid #f3f3f3;
  border-radius: 50%;
  border-top: 8px solid #3498db;
  width: 60px;
  height: 60px;
  animation: spin 2s linear infinite;
  position: fixed;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<body>
  <div class="header">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</br></br></br></br>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</br></br></br></br>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</br></br></br></br>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</br></br></br></br>

    <div class="spinner-wrapper">
      <div class="spinner"></div>
    </div>
  </div>
  <div class="main">
    <div class="content">
      Content

      <div class="spinner-wrapper">
        <div class="spinner"></div>
      </div>
    </div>
    <div class="side-menu">
      Side menu

      <div class="spinner-wrapper">
        <div class="spinner"></div>
      </div>
    </div>
  </div>
</body>

即使出现滚动，也可在侧面菜单中将微调框居中

3 个答案: