Scrollable div with absolute positioning
Question
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.
1 answers
solution1
3 ACCPTED 2016-07-19 15:15:16
Try This (Might want to click full page to fully see it):
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>
Here is the fiddle: https://jsfiddle.net/eebjqmdx/
All your follow content will go in div.floating
EDIT: Updated Fiddle See this fiddle for the linked scrollbars: https://jsfiddle.net/eebjqmdx/3/ (I think this is what you wanted)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.