如何用Vanilla JS实现滑块控制图片上Textarea的动态定位

下面是基于原生JS的完整实现，满足你拖动滑块（1%-100%）控制textarea在图片上方上下移动、100%时位于图片底部且不超出边界的需求：

<div class="image-container">
  <img src="your-image-url.jpg" alt="目标图片" class="target-image">
  <textarea class="floating-textarea" placeholder="输入内容..."></textarea>
</div>
<input type="range" min="1" max="100" value="1" class="position-slider">

<style>
/* 容器设置相对定位，作为textarea的定位基准 */
.image-container {
  position: relative;
  display: inline-block; /* 让容器宽度适配图片 */
  max-width: 100%;
}

/* 图片自适应容器宽度 */
.target-image {
  display: block;
  width: 100%;
  height: auto;
}

/* textarea绝对定位，初始位于图片顶部 */
.floating-textarea {
  position: absolute;
  top: 0;
  left: 10px;
  width: calc(100% - 20px);
  height: 80px;
  padding: 8px;
  box-sizing: border-box;
  background: rgba(255,255,255,0.9);
  border: 1px solid #ccc;
  resize: vertical;
}

/* 滑块样式优化 */
.position-slider {
  width: 100%;
  margin-top: 10px;
}
</style>

<script>
// 获取DOM元素
const container = document.querySelector('.image-container');
const image = document.querySelector('.target-image');
const textarea = document.querySelector('.floating-textarea');
const slider = document.querySelector('.position-slider');

// 计算可移动范围的核心函数
function updateTextareaPosition() {
  // 获取图片实际高度和textarea高度
  const imageHeight = image.offsetHeight;
  const textareaHeight = textarea.offsetHeight;
  
  // 计算最大可移动的top值：图片高度 - textarea高度（确保textarea底部不超出图片）
  const maxTop = imageHeight - textareaHeight;
  // 根据滑块值计算当前top值，滑块1%对应接近顶部，100%对应maxTop（底部对齐）
  let currentTop = maxTop * (slider.value / 100);
  
  // 边界校验：确保top不小于0（避免textarea顶部超出图片）
  currentTop = Math.max(0, currentTop);
  
  // 应用定位
  textarea.style.top = `${currentTop}px`;
}

// 监听滑块拖动事件（实时更新）
slider.addEventListener('input', updateTextareaPosition);
// 监听滑块确认事件（防止某些浏览器只在松开时触发）
slider.addEventListener('change', updateTextareaPosition);

// 页面加载完成后初始化位置
window.addEventListener('load', updateTextareaPosition);
// 窗口大小变化时重新计算（适配响应式图片）
window.addEventListener('resize', updateTextareaPosition);
</script>

关键实现细节说明 #

• 布局定位：用position: relative的容器包裹图片和textarea，让textarea的绝对定位以图片容器为基准，确保不会脱离图片范围。
• 位置计算逻辑：
  • 核心公式：currentTop = (图片高度 - textarea高度) * (滑块值/100)，保证滑块拉到100%时，textarea底部刚好对齐图片底部。
  • 加入Math.max(0, currentTop)做边界校验，避免textarea顶部超出图片上方。
• 适配处理：监听窗口resize事件，确保图片尺寸变化时，textarea位置能自动重新计算，保持正确的相对位置。
• 交互优化：同时监听滑块的input和change事件，实现拖动过程中实时更新，以及松开滑块时的最终确认。

内容的提问来源于stack exchange，提问作者Dr. Junior