如何通过侧边滚动按钮实现每次精准滚动4个div并对齐？

一、修复Margin未生效问题 #

你的CSS中.box的margin-right: 14缺少单位，浏览器无法识别，改为margin-right: 14px即可生效。

二、实现每次精准滚动4个Div #

不要使用固定的滚动距离，而是动态计算单个box的实际宽度（含间距），再乘以4作为滚动量，这样能适配不同屏幕尺寸：

修改后的JavaScript代码 #

const nextbtns = document.querySelectorAll('.next');
const backbtns = document.querySelectorAll('.back');

// 获取单个box的宽度+间距的总尺寸
function getBoxScrollStep(container) {
  const firstBox = container.querySelector('.box');
  if (!firstBox) return 0;
  // 获取box的实际宽度+右侧margin
  const boxWidth = firstBox.offsetWidth;
  const boxMarginRight = parseInt(window.getComputedStyle(firstBox).marginRight, 10);
  return (boxWidth + boxMarginRight) * 4;
}

// 绑定下一页按钮事件
nextbtns.forEach(nxt => {
  nxt.addEventListener('click', () => {
    const conId = nxt.dataset.con;
    const container = document.getElementById(conId);
    const scrollStep = getBoxScrollStep(container);
    container.scrollLeft += scrollStep;
  });
});

// 绑定上一页按钮事件
backbtns.forEach(bck => {
  bck.addEventListener('click', () => {
    const conId = bck.dataset.con;
    const container = document.getElementById(conId);
    const scrollStep = getBoxScrollStep(container);
    container.scrollLeft = Math.max(0, container.scrollLeft - scrollStep);
  });
});

// 窗口大小变化时无需额外操作，每次点击会重新计算滚动量
window.addEventListener('resize', () => {});

修改后的CSS（仅修复margin部分） #

.box {
width: 24%;
height: 180px;
background-color: #171717;
border-radius: 20px;
display: inline-block;
margin-right: 14px; /* 添加px单位 */
}

关键说明 #

1. 动态计算滚动量：通过offsetWidth获取box的实际宽度，getComputedStyle获取真实的margin值，两者相加后乘以4，得到每次需要滚动的距离。
2. 边界处理：点击返回按钮时，用Math.max(0, ...)确保不会滚到容器左侧之外。
3. 自适应屏幕：每次点击按钮都会重新计算滚动量，窗口大小变化后自动适配。

附加问题：lite-youtube.js添加onStateChange监听 #

lite-youtube.js会在视频加载完成后暴露原生的YouTube iframe API对象，你可以通过以下步骤绑定状态监听：

1. 确保页面已引入YouTube iframe API脚本。
2. 监听liteYoutubeIframeLoad事件来获取加载完成的iframe，并绑定状态监听：

document.addEventListener('liteYoutubeIframeLoad', (e) => {
  const iframe = e.detail;
  const player = new YT.Player(iframe, {
    events: {
      onStateChange: (event) => {
        // 视频结束时的状态码为0
        if (event.data === YT.PlayerState.ENDED) {
          console.log('视频已结束');
          // 在此处执行你的业务逻辑
        }
      }
    }
  });
});

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