前端吸顶等滑动效果的实现方案

1.吸顶效果两层overflow的实现方案

(1) 实现思路

将需要下滑的容器(div盒子)设置为 overflow-x:hidden;overflow-y:auto;注意要给一个具体的高度才会有滚动效果；吸顶部分的元素盒子不需要设置滚动属性；在他们的父级元素或祖先级元素生设置overflow-x:auto;overflow-y:hidden属性；
简单来说：就是下滑滚动是设置在子元素里面，左右滚动效果放在他们的祖先或父级元素上

(2) 使用overflow属性的注意事项

• overflow属性只能作用在块级容器上
• 为使 overflow 有效果，块级容器必须有一个指定的高度（height或者max-height）或者将white-space设置为nowrap
• 即使将overflow设置为hidden，也可以使用JavaScript Element.scrollTop 属性来滚动HTML元素。

(3) overflow的其他用途

overflow 的值为非 visible 的时候可以生成新的 BFC （块级格式化上下文）

• 实现左侧定宽，右侧自适应布局

.box7{
	background: red;
	width: 200px;
	float: left;
}
.box8{
	background: darkcyan;
	overflow: hidden;
}

• 除浮动影响、
• margin 不再折叠等
• overflow:hidden 搭配 white-space:nowrap、text-overflow:ellipsis实现...效果

2.滚动贴合效果

(1)关键属性

• 滚动容器上：scroll-snap-type: y mandatory; CSS 属性定义在滚动容器中的一个临时点（snap point）如何被严格的执行
• 滚动的子级内容上：scroll-snap-align: start;

(2)关键代码

#main {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 40vw;
    height: 40vh;
    overflow: auto;
    /* 父级容器加上 */
    scroll-snap-type: y mandatory;
}
#main li {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 子级元素加上 */
    scroll-snap-align: start;
}