Scrollable div with absolute positioning

2018-06-22 23:07:33

I have a div that is positioned as absolute . This div will follow the user when they scroll down the page. The div contains dates next to each other. Another div is below it that contains data relative to the one above it. It sorta looks like this. Both of these are contained inside a div.

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

As you see, the dates and info will continue throughout the div . Extending outside of the parent div .

The div that contains both of the inner divs is scroll-able horizontally, my problem is that the div that is positioned as absolute should also scroll at the same time the div that is not positioned as absolute . It just stays static.

Is there a way to make the div positioned as absolute be able to scroll horizontally to see the other dates on it that are outside of view?

EDIT

I just tried to add position: fixed and that didn't make it scroll-able either.

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

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>

链接地址: http://www.djcxy.com/p/64400.html

上一篇: GXT中的组合框中的水平滚动条

下一篇: 可滚动的div，绝对定位