Question

我的div定位为absolute。当用户向下滚动页面时，此div将跟随用户。 div包含彼此相邻的日期。另一个div位于其下方，包含与其上方相关的数据。它看起来像这样。这两个都包含在div.

中

1/1/1901 | 1/2/1901 | 1/3/1901 | ...
Blah     | Blah     | Blah     | ...

如您所见，日期和信息将在整个div内继续。在父div之外扩展。

包含内部div的{{1}}可以横向滚动，我的问题是位于divs的{{1}}也应滚动到同时div未定位为absolute。它只是保持静止。

有没有办法让div定位为absolute能够水平滚动以查看其他日期以外的日期？

修改

我刚尝试添加div，但也没有让它滚动。

Answer 1

试试这个（可能想点击整页以完全看到它）：

body{margin:0}
div{height:100vh;width:100vw}
div.page1{background-color: red;}
div.page2{background-color: blue;}
div.page3{background-color: green;}
div.page4{background-color: yellow;}
div.floating{width:20vw;position:fixed;top:5vh;background-color: white;height:5vh;right:0;overflow-x:scroll;white-space:nowrap;line-height:4vh;overflow-y:hidden}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="page1"> </div>
<div class="page2"> </div>
<div class="page3"> </div>
<div class="page4"> </div>
  <div class="floating"> 
 Blah     | Blah     | Blah     |Blah     | Blah     | Blah     |Blah     | Blah     | Blah     |Blah     | Blah     | Blah     |
  </div>
</body>
</html>

这是小提琴：https://jsfiddle.net/eebjqmdx/

您的所有关注内容都将以div.floating

开头

编辑：更新小提琴看到链接滚动条的这个小提琴：https://jsfiddle.net/eebjqmdx/3/（我想这就是你想要的）

具有绝对定位的可滚动div

1 个答案: