如何实现箭头仅垂直随滚动固定、避免水平移动的CSS方案？

我完全懂你的痛点——position: fixed确实能让箭头垂直固定在视口，但它是绑定在视口上的，页面水平滚动时会死死钉在同一个位置，完全不跟着内容走。下面给你两个靠谱的解决思路，一个纯CSS、一个用JS控制，你可以根据自己的页面场景选择：

方法一：纯CSS用position: sticky（推荐，无JS依赖） #

sticky的核心特性是相对于父容器滚动，只要父容器是能水平滚动的页面容器（比如body或者你的页面外层容器），就能实现「垂直固定在视口、水平随页面滚动」的效果。

代码示例： #

#arrowR {
  /* 核心：sticky定位，相对于父容器生效 */
  position: sticky;
  /* 垂直固定在视口中间，用translateY抵消自身高度的一半，实现完美居中 */
  top: 50%;
  transform: translateY(-50%);
  /* 你的水平偏移设置，比如距离右侧50px */
  right: 50px;
  /* 补全你原来的样式 */
  color: black !important;
  font-weight: bold !important;
}

/* 确保页面外层容器（比如body）能正常水平滚动，不要加overflow:hidden */
body {
  overflow-x: auto;
  width: max-content; /* 让容器自适应内容宽度，触发水平滚动 */
}

注意事项：

• 父容器不能设置overflow: hidden，否则sticky会直接失效
• 如果页面的水平滚动是由某个内层容器产生的，把箭头放到那个容器里，sticky就会跟着这个容器同步水平滚动

方法二：JavaScript动态控制位置（兼容性更强，适合复杂场景） #

如果sticky在你的场景里有兼容性问题（比如需要兼容旧浏览器），可以用JS监听滚动事件，精准控制箭头的垂直和水平位置。

代码示例： #

#arrowR {
  position: absolute;
  /* 补全你原来的样式 */
  color: black !important;
  font-weight: bold !important;
  /* 初始位置随便设，JS会覆盖 */
  top: 0;
  left: 0;
}

const arrow = document.getElementById('arrowR');

// 定义更新位置的函数
function updateArrowPos() {
  // 垂直方向：保持在视口中间，减去自身高度的一半实现居中
  const verticalCenter = window.innerHeight / 2 - arrow.offsetHeight / 2;
  // 水平方向：视口右侧偏移50px，加上页面水平滚动的距离（scrollX）
  const horizontalPos = window.innerWidth - 50 + window.scrollX;

  // 应用计算好的位置
  arrow.style.top = `${verticalCenter}px`;
  arrow.style.left = `${horizontalPos}px`;
}

// 初始化时先设置一次位置
updateArrowPos();

// 监听滚动事件，实时更新位置
window.addEventListener('scroll', updateArrowPos);
// 监听窗口大小变化，防止resize后位置错乱
window.addEventListener('resize', updateArrowPos);

优势：

• 完全自定义位置逻辑，适合任何复杂的页面结构
• 兼容性拉满，几乎所有浏览器都支持

你可以先试试方法一，纯CSS更简洁；如果遇到场景限制再切换到方法二，灵活性更高。

内容的提问来源于stack exchange，提问作者Alessandro Pierro