Question

我有一个非常宽的元素，但过了大约10万像素，div停止显示（虽然它仍然是可点击和可交互的）

这是div结尾的图像：

这有什么解决方法吗？我正在创建一个视频时间轴，正如您所看到的，当我们一直缩放到特定帧时，时间轴元素会变得非常大。

并且，如果这是没有修复的东西，有没有人知道虚拟化宽度的任何方法？（允许我仍然显示滚动条，但一次只渲染每个in-View部分，以解决这个溢出问题？）

我的代码中有很多内容，但这是我的timelime的html：

<div 
    id="component-container"
    (scroll)="updateActiveFrameRange()"
>

    <div 
        id="timeline" 
        tabindex="0"
        (focus)="OnFocus()"
        (blur)="OnBlur()"
        (keydown)="OnKeyInput($event)"
        (click)="OnTimelineClick($event)"
        (wheel)="handleScroll($event)"
    >

        <div 
            id="playhead"
            (mousedown)="movePlayheadByMouse()"
        >
                <span id="playhead-marker">&#9930;</span>
                <div id="playhead-line"></div>
        </div>

        <div 
            id="time-section"
        >   
            <div *ngIf="this.inTimeCode">
                <measure-line 
                    *ngFor="let frame of this.measureLineArray"
                    [frame]="frame"
                    [timeCode]="getTimeCode(frame)"
                    [leftPos]="frameToPx(frame)"
                    [labelInterval]="this.labelInterval"
                    [displayTimeCode]="true"
                >
                </measure-line>
            </div>

            <div *ngIf="!this.inTimeCode">
                <measure-line 
                    *ngFor="let frame of this.measureLineArray"
                    [frame]="frame"
                    [leftPos]="frameToPx(frame)"
                    [labelInterval]="this.labelInterval"
                    [displayTimeCode]="false"
                >
                </measure-line>
            </div>

        </div>

        <md-divider>

        <div 
            class="track-section">
        </div>

        <md-divider>

        <div 
            class="track-section">
        </div>

    </div>

</div>

以及相关的CSS：

#component-container {
    width: 100%;
    overflow-x: auto;
}

#timeline {
    background-color: grey;
    position: relative;
}

#playhead {
    margin-top: 34px;
    // This height variable should always be === (3 * the number of track-section elements) + 8
    // This can be done in the .ts file in response to an event that represents adding a track section
    height: 108px;
    width: 1px;
    color: yellow;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    z-index: 50;

    #playhead-line {
        background-color: yellow;
        height: 100%;
        width: 1px;
        margin: 0px;
    }
    #playhead-marker {
        height: 12px;
        font-size: 12px;
        margin-top: -8px;
        user-select: none;
    }
}

#playhead:hover {
    cursor: pointer;
}

#playhead-marker:hover {
    cursor: pointer;
}

.md-tooltip {
    user-select: none !important;
}

#time-section {
    height: 40px;
    position: relative;
    z-index: 10;
}

.track-section {
    height: 50px;
    position: relative;
    z-index: 10;
}

最后，这是调整宽度的Typescript函数：

private handleScroll(event : WheelEvent) : void
    {
      if (event.deltaY < 0)
      {
        // Assigning maximum zoom to be when the timeline displays 29 or less frames
        if (this.Container.scrollWidth / this.Container.clientWidth >= this.numFrames / 29)
        { 
          console.log("hit max");
          return;
        }
        else 
        {
          this.zoom *= 1.5;
        }
      }

      if (event.deltaY > 0)
      {
        // Minimum zoom ratio is 1
        if (this.zoom > 0.8)
        {
          this.zoom *= 0.8;
        }
      }

      // Store information before zooming to be able to recalculate new position after zoom
      let prevMouseOffset = event.clientX - this.Container.offsetLeft;

      let prevMouseOffsetRatio = (event.clientX - this.Container.offsetLeft + this.Container.scrollLeft) / this.Container.scrollWidth;

      // Zoom!
      this.Timeline.style.width = Math.ceil(this.startingTimelineWidth * this.zoom) + "px";

      // Set scrollLeft to maintain the frame the mouse was previously on
      this.Container.scrollLeft = (this.Container.scrollWidth * prevMouseOffsetRatio) - prevMouseOffset;

      this.OnZoomUpdated();

      this.renderTimeline();

      console.log(this.Timeline.clientWidth);
    }

谢谢！

（非常大）div显示在一定宽度后消失（约10 mil px）

0 个答案: