我想實現一個位置指示器，以線條的形式顯示圖像堆棧中的位置，它應該使用鼠標滾輪在背景圖像上從上到下移動，在單擊后從左到右移動(反之亦然)。為了更好地說明我的問題，我用一種顏色替換了背景圖像。然而，該線不僅僅限于截面區域，而且在調整到正確方向之前，通過在垂直方向上移動，還顯示出奇怪的行為(點擊之后)。有人能幫我解決這個問題嗎？提前感謝！

const line = document.querySelector('.line');
const section = document.querySelector('.section');
const sectionRect = section.getBoundingClientRect();
let direction_move = 'vertical';

function handleScroll(event) {
  event.preventDefault();

  if (direction_move === 'horizontal') {
    const minPosition = sectionRect.left;
    const maxPosition = minPosition + sectionRect.width;
    let newPosition = line.getBoundingClientRect().left + event.deltaY;
    newPosition = Math.max(minPosition, Math.min(maxPosition, newPosition));
    line.style.transform = `translateX(${newPosition - minPosition}px)`;
  } else {
    const minPosition = sectionRect.top;
    const maxPosition = minPosition + sectionRect.height;
    let newPosition = line.getBoundingClientRect().top + event.deltaY;
    newPosition = Math.max(minPosition, Math.min(maxPosition, newPosition));
    line.style.transform = `translateY(${newPosition - minPosition}px)`;
  }
}

function handleClick(event) {
  event.preventDefault();

  if (direction_move === 'horizontal') {
    direction_move = 'vertical';
    line.style.width = `${sectionRect.width}px`;
    line.style.height = '2px';
    line.style.transform = `translateX(${sectionRect.left}px)`;
  } else {
    direction_move = 'horizontal';
    line.style.height = `${sectionRect.height}px`;
    line.style.width = '2px';
    line.style.transform = `translateY(${sectionRect.top}px)`;
  }
}

document.addEventListener('wheel', handleScroll);
document.addEventListener('click', handleClick);

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  height: 500px;
}

.section {
  background-color: #f2f2f2;
  margin: 0px;
  pading: 0px;
}

.content {
  display: grid;
  grid-template-rows: 1fr 2px 1fr;
  gap: 10px;
}

.line {
  width: 100%;
  height: 2px;
  background-color: black;
  transition: transform 0.3s;
}

<div class="container">
  <div class="section">
    <div class="content">
      <div></div>
      <div class="line"></div>
      <div></div>
    </div>
  </div>
</div>

const minMax = (val, m, M) => Math.min(Math.max(val, m), M);
const elBox = document.querySelector(".box");
const elLine = document.querySelector(".line");
const pos = { x: 0, y: 0 };
const step = 30;
let isX = false;

const lineMove = () => {
  pos.y = minMax(pos.y, 0, elBox.clientHeight);
  pos.x = minMax(pos.x, 0, elBox.clientWidth);
  elLine.style.translate = `${pos.x}px ${pos.y}px`;
};

const handleScroll = (evt) => {
  evt.preventDefault();
  const delta = Math.sign(evt.deltaY);
  pos[isX ? "x" : "y"] += step * delta;
  elLine.style.transitionDuration = "0.3s";
  lineMove();
}

const handleClick = () => {
  isX = !isX;
  pos.x = 0;
  pos.y = 0;
  elLine.classList.toggle("is-x", isX);
  elLine.style.transitionDuration = "0s";
  lineMove();
};

elBox.addEventListener("wheel", handleScroll);
elBox.addEventListener("click", handleClick);

* {
  margin: 0;
  box-sizing: border-box;
}

.box {
  position: relative;
  width: 400px;
  height: 400px;
  background-color: #0bf;
}

.line {
  position: absolute;
  background-color: black;
  transition: translate;
  width: 100%;
  height: 2px;
}

.line.is-x {
  width: 2px;
  height: 100%;
}

Scroll to move line, click to change orientation
<div class="box">
  <div class="line"></div>
</div>