如何避免滑块悬浮提示框溢出蓝色容器？

我编写了一段代码，当鼠标悬停在滑块上时会显示提示框，功能基本正常，但鼠标移到滑块首尾两端时，提示框会溢出蓝色容器区域，希望找到方法让提示框始终处于蓝色区域内。

原代码 #

HTML

<div class="container">
  <div id="core" class="core">
    <input id="progress" class="range" type='range' min="0" max="100" step="0.01" value="0">
    <div id="thumbnail" class="thumbnail"></div>
  </div>
</div>

CSS

body {
  overflow: hidden;
}

.container {
  width: 100%;
  max-width: 800px;
  position: relative;
  background-color: blue;
  height: 200px;
  overflow: hidden;
}

.core {
  margin: 0;
  display: flex;
  position: absolute;
  bottom: 4px;
  width: 100%;
  flex-wrap: nowrap;
  background-color: red;
  height: auto;
}

.range {
  width: 90%;
  margin: 0 auto;
}

.range:hover + .thumbnail {
  display: block;
}

.thumbnail {
  display: none;
  z-index: 1;
  position: absolute;
  bottom: 30px;
  right: auto;
  margin: 0;
  width: 12em;
  height: 7em;
  background: rgb(200, 200, 200);
  pointer-events: none;
  padding: 2px 2px;
  transform: translateX(-50%);
  left: 50%;
}

.thumbnail::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  border: 8px solid transparent;
  border-top: 8px solid rgb(200, 200, 200);
  transform: translateY(-19%);
}

JavaScript

var left = document.getElementById('core').getBoundingClientRect().left - document.documentElement.getBoundingClientRect().left;

window.onmousemove = function (e) {
  let x = ((e.clientX + window.pageXOffset) - left);
  document.getElementById("thumbnail").style.left = (x + "px");
}

预期效果 #

提示框在鼠标移到滑块首尾时，会自动贴住蓝色容器的左右边缘，不会溢出容器范围。

修复方案 #

核心思路是限制提示框的left值范围，结合transform: translateX(-50%)的居中逻辑，确保提示框始终在容器内。修改JavaScript代码如下：

const core = document.getElementById('core');
const thumbnail = document.getElementById('thumbnail');
const coreWidth = core.offsetWidth;
const thumbWidth = thumbnail.offsetWidth;
const halfThumbWidth = thumbWidth / 2;
const minLeft = halfThumbWidth;
const maxLeft = coreWidth - halfThumbWidth;

var leftOffset = core.getBoundingClientRect().left - document.documentElement.getBoundingClientRect().left;

window.onmousemove = function (e) {
  let x = ((e.clientX + window.pageXOffset) - leftOffset);
  // 限制x的范围，确保提示框不溢出
  const clampedX = Math.max(minLeft, Math.min(x, maxLeft));
  thumbnail.style.left = `${clampedX}px`;
}

修复说明 #

1. 先获取容器core和提示框thumbnail的宽度，计算出提示框半宽halfThumbWidth
2. 确定left值的边界：
   • 最小left值为halfThumbWidth：保证提示框左侧不会溢出容器
   • 最大left值为coreWidth - halfThumbWidth：保证提示框右侧不会溢出容器
3. 使用Math.max和Math.min将计算出的x值限制在边界内，再设置给提示框的left属性

这样修改后，无论鼠标移到滑块哪个位置，提示框都会始终保持在蓝色容器内部。

内容的提问来源于stack exchange，提问作者zhin dins