如何反转div元素宽度变化方向，修正banner文本交互错位问题？

核心问题出在文本容器的宽度计算逻辑、定位方式和对齐方向的不匹配上，调整以下几点就能修复：

1. 修正文本容器的宽度计算与定位 #

原来的文本容器宽度计算逻辑导致鼠标移动时，文本的显示范围和预期相反，同时需要调整容器的定位基准，让文本的裁剪方向和鼠标移动一致。

2. 调整文本的对齐与溢出裁剪方向 #

给文本容器添加正确的justify-content和文本对齐，确保文本在容器宽度变化时，从正确的方向被裁剪/显示。

修改后的完整代码：

HTML部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body onload="start()">
  <div class="container-top">
    <div class="slider-bar" style="left: calc(var(--mouse-x) - 4px); z-index: 2;"></div>
    <div class="container-middle" style="transform: translate(256px, 0)">
      <div class="container-bottom left" style="width: calc(var(--mouse-x) - 256px);">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="container-bottom right" style="width: calc(256px - var(--mouse-x));">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>

    <div class="container-middle text-container" style="position: absolute; top: 0; left: 0; width: 512px;">
      <!-- 左侧文本：鼠标右移时显示，左移时从左往右裁剪 -->
      <div class="container-bottom text left-text" style="width: calc(var(--mouse-x) - 128px);">
        <h2>Left Text</h2>
      </div>

      <!-- 右侧文本：鼠标左移时显示，右移时从右往左裁剪 -->
      <div class="container-bottom text right-text" style="width: calc(640px - var(--mouse-x));">
        <h2>Right Text</h2>
      </div>
    </div>
  </div>
</body>

CSS部分

html {
  background-color: #1c1c1c;
  color: white;
}

.slider-bar {
  position: absolute;
  height: 64px;
  width: 8px;
  border-radius: 8px;
  background: black;
}

.container-top {
  height: 64px;
  width: 512px;
  position: relative; /* 新增：让内部绝对定位元素以它为基准 */
  margin: 0 auto; /* 居中方便测试 */
}

.container-middle {
  display: flex;
  align-items: center;
  height: 64px;
  width: 64px;
  position: relative;
}

.container-bottom {
  position: absolute;
  display: flex;
  overflow: hidden;
  height: 64px;
}

.container-bottom div {
  height: 64px;
  min-width: 64px;
  width: 64px;
  background-color: gray;
  margin: 8px;
  border-radius: 8px;
  border-color: black;
}

.left {
  justify-content: flex-start;
  left: 0; /* 修改：从容器左侧开始 */
  background-color: lightgreen;
}

.right {
  justify-content: flex-end;
  right: 0; /* 修改：从容器右侧开始 */
  background-color: lightblue;
}

.text {
  background: none;
  font-size: 32px;
  white-space: nowrap; /* 替换text-wrap: nowrap，兼容性更好 */
  overflow: hidden;
  color: red;
  margin: 16px;
}

.left-text {
  left: 0;
  justify-content: flex-start;
  text-align: left;
}

.right-text {
  right: 0;
  justify-content: flex-end;
  text-align: right;
}

.text-container {
  display: flex;
  justify-content: space-between;
}

JS部分（仅调整滑块位置计算，让滑块跟随鼠标更准确）

let root;

$("body").ready(function() {
  $(document).on("mousemove", function(event) {
    // 限制鼠标x坐标在banner范围内，避免滑块超出
    const bannerLeft = $(".container-top").offset().left;
    const bannerRight = bannerLeft + $(".container-top").width();
    let xPos = event.pageX;
    if (xPos < bannerLeft) xPos = bannerLeft;
    if (xPos > bannerRight) xPos = bannerRight;
    root.style.setProperty("--mouse-x", xPos + "px");
  });

  $(".container-top").on("mouseout", function(event) {
    const bannerLeft = $(".container-top").offset().left;
    const xPos = bannerLeft + $(".container-top").width() / 2;
    root.style.setProperty("--mouse-x", xPos + "px");
  });
});

function start() {
  root = document.documentElement;
  // 初始化滑块在中间位置
  const bannerLeft = $(".container-top").offset().left;
  const xPos = bannerLeft + $(".container-top").width() / 2;
  root.style.setProperty("--mouse-x", xPos + "px");
}

修改说明 #

• 容器定位：给.container-top添加position: relative，让内部绝对定位的元素以它为基准，避免超出范围。
• 文本容器逻辑：
  • 左侧文本容器从banner左侧开始，宽度随鼠标右移而增加，文本左对齐，溢出时从右侧裁剪（符合鼠标右移显示左侧文本的预期）。
  • 右侧文本容器从banner右侧开始，宽度随鼠标左移而增加，文本右对齐，溢出时从左侧裁剪（符合鼠标左移显示右侧文本的预期）。
• 滑块位置：调整滑块的left计算，让它精准跟随鼠标，同时限制鼠标坐标在banner范围内，避免滑块跑出区域。
• 兼容性优化：用white-space: nowrap替换text-wrap: nowrap，适配更多浏览器。

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