键盘控制元素左右移动异常：右移后无法触达左边界

问题现象 #

通过按键a（左移）和d（右移）控制方块移动时，右移后再左移，方块无法到达屏幕左边界。

问题根源 #

你的代码同时使用left和right两个CSS定位属性控制元素位置：

• 按d键时累加cal值并设置element.style.left
• 按a键时累加val值并设置element.style.right

绝对定位元素的left和right属性会相互干扰：初始状态下元素通过left:0、right:0%和margin:auto居中，设置left后位置基准被修改，再设置right时浏览器会同时计算两个属性值，导致位置逻辑混乱；同时初始的margin:auto居中规则仍在生效，进一步加剧了定位偏差。

修复方案 #

统一使用单一属性控制位置，推荐两种可行方式：

方式1：统一使用left属性 #

移除CSS中干扰定位的right:0%和margin:auto，用单个变量记录当前left值，左移时减少该值、右移时增加该值。

方式2：使用transform: translateX() #

这种方式仅修改元素视觉位置，不改变布局定位，更适合移动交互场景。

修改后的代码 #

方式1（基于left属性） #

<div id="lupo"></div>

body {
  background-color: red
}

#lupo {
  height: 200px;
  width: 200px;
  background-color: yellow;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0; /* 初始固定在左边界 */
  margin: auto 0; /* 仅保留垂直居中 */
}

var element = document.getElementById("lupo");
var position = 0; // 统一记录left位置

document.addEventListener("keypress", function(event) {
  move(event.key);
});

function move(key) {
  switch (key) {
    case "a":
      position -= 50;
      element.style.left = `${position}px`;
      break;
    case "d":
      position += 50;
      element.style.left = `${position}px`;
      break;
    default:
      break;
  }
}

方式2（基于transform平移） #

<div id="lupo"></div>

body {
  background-color: red
}

#lupo {
  height: 200px;
  width: 200px;
  background-color: yellow;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0; /* 初始固定在左边界 */
  margin: auto 0; /* 仅保留垂直居中 */
}

var element = document.getElementById("lupo");
var offset = 0; // 记录平移偏移量

document.addEventListener("keypress", function(event) {
  move(event.key);
});

function move(key) {
  switch (key) {
    case "a":
      offset -= 50;
      element.style.transform = `translateX(${offset}px)`;
      break;
    case "d":
      offset += 50;
      element.style.transform = `translateX(${offset}px)`;
      break;
    default:
      break;
  }
}

若需要初始位置为屏幕中央，可调整初始left值为calc(50% - 100px)（元素宽200px，减100px让中心对齐），或修改offset初始值为对应偏移量。

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