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来实现此目的。这将是滚动位置的一半，因此您可以将此值设置为{ {1}}属性。

如果您的div包含图像，则要在窗口加载事件中执行此操作。在文档DOMContentLoaded事件上，图像尚未加载（除非兑现），因此加载图像时div的大小可能会更改。

scrollLeft

//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;
}

Answer 2

我个人不喜欢使用addEventListener，所以@ViewChild更好。这取决于使用哪个角度

修改@ ng-hobby的答案：

在时间轴条div中添加ID：

<div class="timeline-strip" #timelineStrip >

修改viewChild并根据需要重命名：

@ViewChild('timelineStrip', {static: false}) timelineStripRef: ElementRef;

您可以在timelineStripRef元素或时间轴上使用scrollTo：

const width = this.timelineStripRef.nativeElement.clientWidth;
this.timelineStripRef.nativeElement.scrollTo(width/2, 0);

Answer 3

我在Stackblitz上为您创建了一个示例

因此，使用@viewChild和ngAfterViewInit和window.scrollTo()来尝试类似的事情：

app.component.html

<hello name="{{ name }}"></hello>
<p class="img" #getHeight>
  Start editing to see some magic happen :)
</p>

app.component.ts

import { Component, VERSION, ElementRef, AfterViewInit, ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit {
  name = 'Angular ' + VERSION.major;
  @ViewChild('getHeight', {static: false}) getHeight: ElementRef;
  constructor(private el: ElementRef){}

  ngAfterViewInit() {
    let pageheight = this.getHeight.nativeElement.offsetHeight;
    console.log(pageheight/2)
    window.scrollTo(0, pageheight/2);
  }
}

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

3 个答案: