移动端点击水平滚动自定义复选框时如何避免整页偏移移位？

问题根因 #

你遇到的整页偏移问题是隐藏的复选框<input>的定位规则导致的：你给<input>设置了position: absolute，但它的父元素<li>没有设置position: relative，此时绝对定位的<input>会相对于整个页面视口定位。当你点击对应<label>时，浏览器默认会自动滚动到关联的<input>元素所在位置，而隐藏的<input>不在当前滚动容器的可视区域内，就会触发整页偏移。

修复方案 #

选以下任意一种即可： #

方案1：给父级<li>添加相对定位

不需要修改HTML结构，只需要在CSS中给ul.ks-cboxtags li新增position: relative属性即可，修改后的CSS片段如下：

ul.ks-cboxtags li{
    display: inline;
    /* 新增这行 */
    position: relative;
}

方案2：调整HTML结构，把<input>放到<label>内部

取消<input>和<label>的id+for绑定，直接把<input>嵌套在<label>标签里，这样点击<label>时不会触发浏览器的自动定位逻辑，示例结构如下：

<li>
  <label>
    <input name="topic_secondary" type="checkbox" value="Study Melbourne" checked>
    Study Melbourne
  </label>
</li>

额外优化建议 #

可以给滚动容器添加以下两个属性，提升移动端滚动体验：

ul.ks-cboxtags {
    list-style: none;
    padding: 0;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 16px 0 0 0;
    /* 新增以下两行 */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

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