CSGO开箱组件响应式适配 箭头与中奖项对齐问题求解

核心问题根源是原实现全部基于固定像素尺寸做定位和位移计算，没有和容器实际渲染尺寸联动，适配时只要把定位、尺寸、位移三个维度的计算基准统一为容器实时尺寸，即可解决所有错位问题。

一、CSS样式修正 #

彻底去掉固定像素宽度、margin偏移居中的写法，用绝对定位保证箭头永久居中，卡片尺寸按容器比例适配：

* {
  box-sizing: border-box;
}

#cardList {
  height: 100px;
  width: min(100%, 1200px);
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  padding: 0;
}

.card {
  display: inline-block;
  text-align: center;
  width: calc(100% / 8);
  height: 100px;
  vertical-align: top;
}

.arrow-down {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 12px solid #ff0000;
  z-index: 10;
}

样式说明：

• 箭头用绝对定位+50%左偏移+水平反向偏移实现，无论容器尺寸如何变化，永远固定在容器水平中线位置，不受内容布局影响
• 卡片宽度按容器1/8比例设置，和原设计800px宽容器下100px单卡的视觉比例完全一致，不同尺寸下所有卡片宽度自动统一
• 容器用min(100%, 1200px)实现响应式：小屏自动占满可用宽度，大屏限制最大宽度避免卡片拉伸过宽，整体自动居中

二、JS动画逻辑修正 #

之前用固定像素、screen.width换算百分比的方案全部作废，所有位移计算以容器、单卡的实时渲染宽度为基准，保证中奖卡片中线精准对准居中箭头：

// 动画启动前获取实时尺寸，禁止使用写死像素值、screen.width做计算
const $cardList = $('#cardList');
const $firstCard = $('.card').first();
let containerWidth = $cardList.width();
let singleCardWidth = $firstCard.width();
let finalOffset = 0;

// 生成随机滚动距离：按单卡宽度整数倍计算，避免停止时卡片错位
const randomCardCount = Math.floor(Math.random() * 170 + 10);
const randomDistance = randomCardCount * singleCardWidth;
// 计算中奖卡片索引，保留原逻辑的偏移基数
const winCardIndex = randomCardCount + 4;
const reward = $(`#itemNumber${winCardIndex}`).attr('data-rarity');
// 随机选择动画缓动函数
const timings = ["easeInOutBack","easeOutExpo","easeInOutBounce","easeOutQuad","swing","easeOutElastic","easeInOutElastic"];
const timing = timings[Math.floor(Math.random() * timings.length)];

// 计算最终偏移量：额外补偿半张卡+半容器宽度差，保证中奖卡中线对准箭头
finalOffset = -(randomDistance - (containerWidth / 2 - singleCardWidth / 2));

$firstCard.animate({
  marginLeft: finalOffset
}, 5000, timing, function() {
  // 原有中奖后的业务逻辑写在这里
})

三、窗口尺寸变化兼容 #

新增resize监听，在用户调整窗口尺寸时实时校正卡片位置，避免动态尺寸下的错位：

$(window).on('resize', function() {
  const newContainerWidth = $cardList.width();
  const newSingleCardWidth = $firstCard.width();
  // 按新尺寸比例换算偏移量，保持当前对准的卡片位置不变
  const scaleRatio = newSingleCardWidth / singleCardWidth;
  const offsetCompensation = (newContainerWidth / 2 - newSingleCardWidth / 2) - (containerWidth / 2 - singleCardWidth / 2) * scaleRatio;
  const newOffset = finalOffset * scaleRatio + offsetCompensation;
  // 无动画直接更新位置，避免抖动
  $firstCard.stop(true, false).css('marginLeft', newOffset);
  // 更新基准尺寸值供下次计算使用
  containerWidth = newContainerWidth;
  singleCardWidth = newSingleCardWidth;
  finalOffset = newOffset;
})

适配效果说明 #

• 全尺寸下红色指示箭头始终保持在开箱区域水平居中位置，无偏移
• 窗口调整、移动端访问时，卡片位置随容器尺寸同步校正，不会出现箭头和道具错位
• 动画停止后，中奖道具中线完全对准箭头位置，无位置偏差
• 开箱区域自动适配可用宽度，整体居中，大屏不会过宽、小屏不会溢出

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