我正在制作一个 Angular 项目，它有一个“时间轴”组件，其中有一个overflow-x: scroll元素：
.container {
width: 30vw;
height: 100vh;
background-color: aquamarine;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.timeline-box {
width: 90%;
position: relative;
}
.timeline-strip {
background-color: yellow;
height: 200px;
display: flex;
overflow-x: scroll;
}
.timeline-box:before {
content: '';
position: absolute;
top: 50%;
border-top: 2px solid black;
width: 100%;
height: 0px;
}
.point {
margin: 0 40px;
align-self:center;
}
.point:before {
content: '';
position: relative;
left: 50%;
border-left: 2px solid black;
top: 20px;
}
<div class="container">
<div class="timeline-box">
<div class="timeline-strip">
<div class="point">1</div>
<div class="point">2</div>
<div class="point">3</div>
<div class="point">4</div>
<div class="point">5</div>
<div class="point">6</div>
<div class="point">7</div>
<div class="point">8</div>
<div class="point">9</div>
<div class="point">10</div>
</div>
</div>
</div>
我想要的滚动条.timeline-strip当用户进入页面时，元素（不是页面本身的滚动条）自动位于中间。我怎样才能实现这个目标？ （如果有帮助的话我正在使用 Angular）
您可以通过以下方式做到这一点scrollWidth财产减去clientWidth属性并将结果除以 2。这将是滚动位置的一半，因此您可以将此值设置为scrollLeft财产。
如果您的 div 包含图像，那么您需要在窗口加载事件上执行此操作。在文档 DOMContentLoaded 事件中，图像尚未加载（除非已兑现），因此当加载图像时，div 的大小可能会发生变化。
//Can be document.addEventListener('DOMContentLoaded', () => {}) when you don't care about images and stuff
window.addEventListener('load', () => {
let scrollElement = document.querySelector('.timeline-strip');
scrollElement.scrollLeft = (scrollElement.scrollWidth - scrollElement.clientWidth ) / 2;
});
.container {
width: 30vw;
height: 100vh;
background-color: aquamarine;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.timeline-box {
width: 90%;
position: relative;
}
.timeline-strip {
background-color: yellow;
height: 200px;
display: flex;
overflow-x: scroll;
}
.timeline-box:before {
content: '';
position: absolute;
top: 50%;
border-top: 2px solid black;
width: 100%;
height: 0px;
}
.point {
margin: 0 40px;
align-self:center;
}
.point:before {
content: '';
position: relative;
left: 50%;
border-left: 2px solid black;
top: 20px;
}
<div class="container">
<div class="timeline-box">
<div class="timeline-strip">
<div class="point">1</div>
<div class="point">2</div>
<div class="point">3</div>
<div class="point">4</div>
<div class="point">5</div>
<div class="point">6</div>
<div class="point">7</div>
<div class="point">8</div>
<div class="point">9</div>
<div class="point">10</div>
</div>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
