Html 将“后退”和“下一步”按钮固定在折线图顶部

我使用的是折线图，我有两个导航按钮，用户可以使用它们来滚动图表。当前，当我滚动图形时，两个按钮也被滚动。我需要使这两个按钮固定，无论滚动图形

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

<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>

---

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

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

将底部：0更改为顶部：0

---

你能把这张图链接起来吗？这将有助于提供更好的解决方案。

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

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