CSS scroll-snap-type属性不显示 横向滚动吸附失效排查

核心问题 #

代码不生效是因为缺少scroll-snap生效的必要配置，编辑器不提示该属性属于编辑器CSS词库更新不及时，不影响属性实际可用，所有现代浏览器均已支持该特性。
scroll-snap生效必须同时配置两个层级的属性：

• 滚动父容器：设置scroll-snap-type指定滚动方向和吸附规则
• 滚动子元素：设置scroll-snap-align指定吸附对齐位置
  另外现有代码还有几个会导致布局异常的细节问题：
• flex布局下横向排列的子项默认会开启收缩，会导致.slide元素宽度被压缩，无法撑满视口
• 父容器没有限定滚动方向，可能出现纵向滚动条干扰
• body默认边距和flex配置容易导致外层容器宽度异常

可直接运行的修正代码 #

HTML部分无需改动，直接替换CSS为以下内容即可：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: yellow;
    font-family: serif;
    overflow: hidden;
}
.blocHorizontal {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: row;
    /* 核心滚动配置 */
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* 隐藏滚动条 */
    scrollbar-width: none;
}
.blocHorizontal::-webkit-scrollbar {
    display: none;
}
.slide {
    /* 核心子项配置 */
    flex-shrink: 0;
    width: 100vw;
    height: 100vh;
    scroll-snap-align: center;
    /* 原有布局配置 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 100px;
}
.one {
    background-image: url("../images/gnegne3.jpg");
    background-size: 200%;
}
.two {
    background-image: url("../images/gnegne4.jpg");
    background-size: 200%;
}
.three {
    background-image: url("../images/gnegne5.jpg");
    background-size: 200%;
}
.four {
    background-image: url("../images/gnegne6.jpg");
    background-size: 200%;
}
/* 剩余的five、six、seven类样式与上述one-four格式完全一致即可，公共样式已经在.slide选择器中统一配置，无需重复编写 */

属性可选调整 #

• 若需要更宽松的吸附触发逻辑，可以把scroll-snap-type的值从x mandatory改为x proximity，只有滚动停止位置接近子项时才会触发吸附
• 若需要吸附时子项靠左/靠右对齐，把scroll-snap-align的值从center改为start/end即可
• 如果不需要平滑滚动效果，删除scroll-behavior: smooth即可

内容的提问来源于stack exchange，提问作者Stéphane Biazzo