javascript - 进入页面后如何使元素滚动到滚动条的中心

Question

我正在制作一个 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)

Answer 1

您可以通过 scrollWidth属性减去 clientWidth属性并将其结果除以 2。这将是滚动位置的一半，因此您可以将此值设置为 scrollLeft属性(property)。
如果您的 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>