点击label时Chrome页面跳转到滑块div顶部的问题求助

我使用了一个纯CSS全屏滑块，在Safari中运行正常，但在Chrome浏览器里点击关联radio按钮的label时，页面会跳转到.css-slider-wrapper容器的顶部。经排查，问题源于radio按钮位于该容器的顶部。

尝试过将radio按钮放入设置了position:absolute;bottom:0的容器中，但滑块功能随即失效；放入.slider-pagination容器时，滑块同样无法正常工作。请问如何阻止Chrome中的这个跳转行为？

可行解决方案 #

方案1：将Radio按钮移出可视区域（推荐，纯CSS解决） #

核心思路是保持radio按钮在DOM中的原有位置（保证CSS兄弟选择器~能正常工作），但通过定位将其移出可视区域，这样点击label时不会触发页面锚点跳转。

修改CSS，添加以下样式：

.slide-radio1, .slide-radio2, .slide-radio3 {
  position: fixed;
  top: -9999px;
  left: -9999px;
  opacity: 0;
  pointer-events: none; /* 可选，防止误点 */
}

• position: fixed：让radio脱离文档流，不影响页面布局
• top: -9999px; left: -9999px：将其移出可视区域
• opacity: 0：隐藏元素
• pointer-events: none：禁止元素接收点击事件（可选，进一步避免干扰）

这个方法不会破坏原有滑块的CSS逻辑，完全保留纯CSS滑块的功能，同时解决Chrome的跳转问题。

方案2：禁用容器的滚动行为（备选） #

给.css-slider-wrapper添加scroll-behavior: auto，强制关闭可能触发的锚点滚动行为：

.css-slider-wrapper {
  /* 原有样式 */
  scroll-behavior: auto;
}

注意：这个方法在某些场景下可能不生效，不如方案1稳定。

方案3：JavaScript阻止默认行为（不推荐） #

如果纯CSS方案无法满足需求，可以通过JS拦截label的点击事件，手动设置radio选中状态：

document.querySelectorAll('.slider-pagination label').forEach(label => {
  label.addEventListener('click', function(e) {
    e.preventDefault();
    const targetRadio = document.getElementById(this.getAttribute('for'));
    if (targetRadio) targetRadio.checked = true;
  });
});

此方法需要额外的JS代码，会增加页面复杂度，优先选择纯CSS方案。

修改后的完整代码示例 #

CSS代码 #

.css-slider-wrapper {
  display: block;
  background: #FFF;
  overflow: hidden;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

/* 新增：隐藏radio按钮 */
.slide-radio1, .slide-radio2, .slide-radio3 {
  position: fixed;
  top: -9999px;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}
    
.slider, .slider2 {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 1;
  z-index: 0;
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: row;
  flex-wrap: wrap;
  -webkit-align-items: center;
  align-items: center;
  justify-content: center;
  align-content: center;
  -webkit-transition: -webkit-transform 1600ms;
  transition: -webkit-transform 1600ms, transform 1600ms;
  -webkit-transform: scale(1);
  transform: scale(1);
}   
    
.slide1, .slide4 {
  background: #feffca;
  left: 0;
}

.slide2, .slide5 {
  background: #feffca;
  left: 100%
}

.slide3, .slide6 {
  background: #feffca;
  left: 200%
}
    
.slide4, .slide5, .slide6{
  background: #c7eefb;
}
  
.slider > div, .slider2 > div {
  text-align: center;
}
   
.slider-pagination {
  position: absolute;
  bottom: 0px;
  width: 100%;
  left: 0;
  text-align: center;
  z-index: 1000;
}

.slider-pagination label {
  font-family: 'ABC Simon Mono Thin';   
  width: auto;
  height: auto;
  display: inline-block;
  cursor: pointer;
  padding: 0px 50px;
}
    
.slider-pagination .page1, .slider-pagination .page4{
  margin-bottom: 100px;
}
    
/* Slider slide effect */
.slide-radio1:checked ~ .slider, .slide-radio4:checked ~ .slider2 {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

.slide-radio2:checked ~ .slider, .slide-radio5:checked ~ .slider2 {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.slide-radio3:checked ~ .slider, .slide-radio6:checked ~ .slider2 {
  -webkit-transform: translateX(-200%);
  transform: translateX(-200%);
}

HTML代码 #

<div class="css-slider-wrapper">
  <input type="radio" name="slider" class="slide-radio1" id="slider_1">
  <input type="radio" name="slider" class="slide-radio2" checked id="slider_2">
  <input type="radio" name="slider" class="slide-radio3" id="slider_3">

  <div class="slider-pagination">
    <label for="slider_1" class="page1">Navigation 1</label>
    <label for="slider_2" class="page2">Navigation 2</label>
    <label for="slider_3" class="page3">Navigation 3</label>
  </div>

  <div class="slider slide1">
    <div class="box">
      <h2>Title</h2>
      Text
    </div>
  </div>      
  <div class="slider slide2">
    <h2>Title</h2>
    Text
  </div>      
  <div class="slider slide3">
    <div class="box">
      <h2>Title</h2>
      Text
    </div>
  </div>
</div>

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