我试图在HTML/CSS中构建一个简单的时间轴事件div。它基本上只是一个彩色矩形，里面有一些文本(标题)。时间轴水平滚动
的事情，我似乎不能弄清楚的是如何保持事件div的标题在视图中，当时间轴滚动。我想的标题一直移动到右边，甚至在容器外，使其保持可见，只要容器div在视图中。这在CSS中可能吗?
这是我目前为止写的:
<html>
<style>
.dummy_timeline {
width:5000px;
top:0px;
left:0px;
height:20px;
background: linear-gradient(90deg, #222 1%, transparent 1%) 1px 0, #fff;
background-size: 200px 1px;
}
.container {
overflow: visible;
position:absolute;
background:#eee;
border:1px solid black;
width:200px;
height:50px;}
.title {
position: absolute;
left:0;
}
</style>
<body>
<!-- JUST A TIMELINE PLACEHOLDER SO THAT THE VIEW CAN SCROLL -->
<div class='dummy_timeline'></div>
<!-- EVENT 1 -->
<div class='container' style='left:120px; top:40;'>
<div class='title'>TITLE1</div>
</div>
<!-- EVENT 2 -->
<div class='container' style='left:50px; top:140;'>
<div class='title'>TITLE2</div>
</div>
</body>
</html>
我需要做的是:
(1)当div完全在视野中时，标题保持在默认位置
OUTSIDE THE VIEW | IN VIEW
|
| [----------------]
| [ TITLE2 ]
| [----------------]
|
(2)滚动时，标题开始向右移动以保持可见
OUTSIDE THE VIEW | IN VIEW
|
|---------]
| TITLE2 ]
|---------]
|
(3)当继续滚动时，标题会从容器中移出，直到容器完全消失
OUTSIDE THE VIEW | IN VIEW
|
|-]
| ]TITLE2
|-]
|
| =浏览器窗口的最左边
纯CSS
Salman A建议我将更改要求，以不允许标题的右边缘超过其父标题的右边缘。正如Salman A所建议的，纯CSS解决方案是简单地将title元素的CSS更改为:
.title {
display: inline-block;
position: sticky;
left: 0;
}
这甚至可能是期望的行为，所以我倾向于改变我的要求。
<标题>JavaScript h1> 了将来的参考，我还附上了我通过以下链接发现的JavaScript解决方案(我怎么能知道DOM元素是否在当前视口可见?)在B001的评论中发现，这反过来又引导我到www139的帖子。我改编了www139提供的代码来检查元素的水平位置，并在需要时调整标题的填充以保持其在视图中。这个版本允许标题越过父标题的右边缘。要点在<script>部分。
<html>
<style>
.dummy_timeline {
width:5000px;
top:0px;
left:0px;
height:20px;
background: linear-gradient(90deg, #222 1%, transparent 1%) 1px 0, #fff;
background-size: 200px 1px;
}
.container {
overflow: visible;
position:absolute;
background:#eee;
border:1px solid black;
width:200px;
height:50px;}
.title {
position: absolute;
left:0;
}
</style>
<script>
window.onscroll = function() {
var elements = document.getElementsByClassName('container');
for (var i = 0; i != elements.length; i++) {
element = elements[i];
offsetLeft = element.getBoundingClientRect().left;
offsetRight = element.getBoundingClientRect().right;
span = element.getElementsByClassName('title')[0];
if (offsetRight <= 0) {
span.style.paddingLeft = 0;
} else if (offsetLeft <= 0) {
span.style.paddingLeft = -offsetLeft;
} else {
span.style.paddingLeft = 0;
}
}
};
</script>
<body>
<!-- JUST A TIMELINE PLACEHOLDER SO THAT THE VIEW CAN SCROLL -->
<div class='dummy_timeline'></div>
<!-- EVENT 1 -->
<div class='container' style='left:120px; top:40;'>
<span class='title'>TITLE1</span>
</div>
<!-- EVENT 2 -->
<div class='container' style='left:50px; top:140;'>
<span class='title'>TITLE2</span>
</div>
</body>
</html>