CSS实现Netflix横向滚动条 解决纵向溢出滚动问题

问题成因 #

• 初始横向滚动失效：块级容器默认会让子元素自动折行纵向排列，仅设置overflow-x: scroll无法让图片横向排布，因此仅能触发纵向滚动
• 添加display: flex后页面底部被拉长：.movies-div被硬编码了height: 3rem，但内部的电影容器+标题总高度远大于3rem，溢出的内容直接撑开了页面高度，产生无意义空白；同时未给flex容器配置禁止折行、隐藏纵向溢出、禁止子项压缩的属性，滚动效果不符合预期

修复代码 #

直接替换对应类的CSS样式即可：

1. 修改电影滚动容器样式

.movies {
    background-color: lightblue;
    border: 1px solid black;
    height: 15rem;
    width: 100%;
    /* 滚动核心配置 */
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    /* 可选样式优化，贴近Netflix交互 */
    gap: 1rem;
    padding: 1rem;
}

2. 修改单张电影海报样式，避免flex布局下被压缩

.sinmovie {
    height: 10rem;
    width: 15rem;
    /* 核心配置 */
    flex-shrink: 0;
    /* 可选样式优化 */
    object-fit: cover;
    border-radius: 4px;
    transition: transform 0.2s ease;
}
/* 可选：鼠标悬停海报放大效果 */
.sinmovie:hover {
    transform: scale(1.05);
}

3. 修改电影模块父容器样式，修复页面底部拉长问题

.movies-div {
    position: absolute;
    top: 45rem;
    width: 100%;
    /* 删除原代码中固定的height: 3rem，让容器高度自适应内部内容 */
    padding: 0 1rem;
}

可选进阶优化（仿Netflix原生效果） #

如果需要隐藏滚动条但保留横向滚动功能，追加以下代码：

/* 兼容多浏览器隐藏滚动条 */
.movies::-webkit-scrollbar {
    display: none;
}
.movies {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

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