纯HTML/CSS轮播点击左右箭头时页面滚动问题求助

你用的是锚点链接（<a href="#itemCarousel-X">），浏览器的默认行为就是：当点击这类链接时，自动滚动页面到对应id的元素所在位置。哪怕你的CSS已经实现了轮播切换效果，这个内置的滚动行为还是会被触发。

方案1：抵消锚点滚动偏移 #

给所有轮播项添加scroll-margin-top，让浏览器计算的滚动位置被完全抵消：

.itemCarousel {
  scroll-margin-top: calc(-100vh + 1px);
  /* 100vh等于当前视口高度，若你的页面顶部有导航栏，可调整为 calc(-100vh + 导航栏高度 + 1px) */
}

方案2：让轮播项脱离文档流（更彻底） #

把轮播容器设置为相对定位，所有轮播项设置为绝对定位，这样它们在文档流中没有占位高度，浏览器滚动到锚点位置时不会产生页面移动：

#conteItemsCarrusel {
  position: relative;
  /* 设置和轮播图片一致的宽高 */
  width: 100%;
  max-width: 800px;
  height: 500px;
  overflow: hidden; /* 隐藏容器外的轮播项 */
}

.itemCarousel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 隐藏所有未被选中的轮播项 */
  display: none;
}

/* 显示被锚点选中的轮播项 */
.itemCarousel:target {
  display: block;
}

/* 默认显示第一个轮播项 */
#itemCarousel-1 {
  display: block;
}

这个方案同时完善了轮播的显示逻辑，确保只有当前选中的轮播项可见。

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