javascript - 使用窗口滚动条来控制溢出的 div 的滚动 - Javascript

Question

我有一个带有 overflow-x:auto 的 div，其中包含一个对于 div 而言太宽的元素，因此它会滚动。问题是元素太高，使用元素的滚动条查看其内容相当麻烦。

更好的方法是使用窗口滚动条来控制元素的滚动，因为它们的位置固定在窗口的边缘。

这可能吗？我似乎想不出这样做的好方法。

下面的问题示例。请注意，此包装器元素必须能够在现有页面布局的流程中工作。

https://jsfiddle.net/3y1549jk/2/

.wrapper {
  position: absolute;
  width: 75%;
  left: 12.5%;
  right: 12.5%;
  height: 200%;
  top: 12.5%;
  bottom: 12.5%;
  background-color: red;
  overflow-x: auto;
}

.content {
  position: absolute;
  width: 150%;
  height: 75%;
  margin: 7.5%;
  background-color: blue;
  color: white;
  padding: 7.5%;
}

<!-- I would like the window to control the horizontal scrolling of the .wrapper div -->
<div class="wrapper">
  <div class="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at libero imperdiet justo finibus vehicula. Integer ac risus quis lectus pretium condimentum in sit amet mauris. Maecenas et sagittis justo. Cras diam urna, placerat aliquet metus non, interdum cursus nisl. Quisque cursus elit feugiat, tempus diam in, faucibus felis.
  </div>
</div>

Answer 1

使用位置 fixed 而不是 absolute..

.wrapper {
  position: absolute;
  width: 75%;
  left: 12.5%;
  right: 12.5%;
  height: 200%;
  top: 12.5%;
  bottom: 12.5%;
  background-color: red;
  overflow-x: auto;
}

.content {
  position: fixed;
  width: 150%;
  height: 75%;
  margin: 7.5%;
  background-color: blue;
  color: white;
  padding: 7.5%;
}

<!-- I would like the window to control the horizontal scrolling of the .wrapper div -->
<div class="wrapper">
  <div class="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at libero imperdiet justo finibus vehicula. Integer ac risus quis lectus pretium condimentum in sit amet mauris. Maecenas et sagittis justo. Cras diam urna, placerat aliquet metus non, interdum cursus nisl. Quisque cursus elit feugiat, tempus diam in, faucibus felis.
  </div>
</div>