Создание кнопки «Назад» и «Далее» в верхней части графика

Question

Я использую линейный график, и у меня есть две навигационные кнопки, которые пользователь может использовать для прокрутки графика. В настоящее время при прокрутке графика также прокручиваются 2 кнопки. Мне нужно сделать эти 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

Изменить 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;
        }
    }
}

Answer 2

Вы можете работать с кадрами. Поместите диаграмму на один кадр и 2 кнопки на другой кадр. Например:

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