将后退和下一个按钮固定在折线图的顶部

Question

我正在使用折线图，并且有两个导航按钮，用户可以使用它们来滚动图形。目前，当我滚动图表时，也会滚动2个按钮。无论图形是否滚动，我都需要固定这两个按钮。

此外，我想隐藏滚动条而不丢失滚动条功能。

<div class = "col-5">
   <div id="wrapperChart" className="hideScroll wrapperScroll sc-line-chart">
      <div className="chartContainer">
         <canvas id="chart"></canvas>
      </div>
      <span type="button" className="sc-btn-icon sc-btn-icon--small sc-line-chart__icon sc-line-chart__icon--left">
         <i className="sc-kiosk-arrow-left2"></i>
      </span>
      <span type="button" className="sc-btn-icon sc-btn-icon--small sc-line-chart__icon sc-line-chart__icon--right">
         <i className="sc-kiosk-arrow-right2"></i>
      </span>
   </div>

CSS：

.sc-line-chart{
    position: relative;
    overflow-x: auto;
    &__icon{
        position: absolute;
        &--left{
            bottom: 0;
            left: 0.15rem;
        }
        &--right{
            bottom: 0;
            right: 0;
        }
    }
}

Answer 1

您可以使用相框。将图表放在一帧上，将2个按钮放在另一帧上。例如：

<frameset cols="90%,10%">
  <frame src="frame_chart.htm">
  <frame src="frame_buttons.htm">
</frameset>

Answer 2

将bottom:0更改为top:0

.sc-line-chart{
    position: relative;
    overflow-x: auto;
    &__icon{
        position: absolute;
        &--left{
            top: 0;
            left: 0.15rem;
        }
        &--right{
            top: 0;
            right: 0;
        }
    }
}