还是前两天的那个唱歌中间页,上线前发现滚动时候体验不好。
因为之前没有做吸顶效果,搜索内容然后滚下去,没有找到内容需要再手动划上来。
方案一:JS 实现
js 无敌大法好。兼容极佳,但是体验上就比较感人了。这里不过多介绍。
方案二:Fixed 实现
fixed 是基于浏览器的定位,在组件中显的不是很适用。
而且在 iOS 也有兼容性问题。
方案三:Sticky 实现
sticky 是新加的 position 的值,可以用于实现粘性定位。
但是显示上会抖动,demo2
方案四:定高 + calc 实现
demo3,组件接收一个 height 参数,用于设置组件高度,默认值是 100vh,下面放一下伪代码。
组件盒子{
max-height: 100vh; 防止传进来的高度太高。
}
搜索盒子{
height: 30px;人为的设置好高度
}
结果盒子{
height: calc(100% - 30px);通过 calc 来写死高度
overflow: scroll;这里 scroll 和 auto 都是可以的,不设置的话无法滑动
}