前两天还是唱歌的中页。上线前发现滚动体验不佳。因为之前没有天花板效果，搜索内容然后向下滚动。如果找不到内容，则需要手动向上滚动。方案一：JS实现js无敌。兼容性极佳，但体验更感人。这里就不过多介绍了。方案二：fixedfixed的实现是基于浏览器的定位，在组件中不太适用。iOS也存在兼容性问题。方案三：实现StickySticky是position新增的一个值，可以用来实现sticky定位。但是显示会抖动。Demo2方案4：设置height+calc实现demo3。组件接收一个高度参数来设置组件的高度。默认值为100vh。下面放上伪代码。组件盒{最大高度：100vh；防止传入高度过高。}搜索框{高度：30px；人为设置高度}结果框{height:calc(100%-30px);用calc写死高度溢出：scroll；这里scroll和auto都是可以的，不设置是不能Swipe的}解决方案5：absolute+box-sizing实现demo4因为absolute是基于第一个非静态祖先定位的，所以我们可以让搜索框基于组件框定位，伪代码如下。组件盒{最大高度：100vh；防止传入高度过高。位置：相对；让里面的绝对根据自己的定位}搜索框{height:30px;人为设置高度position:absolute;设置为相对定位top:0;宽度：100%；泄漏地下的内容。}结果框{height:100%;填充顶部：30px；在展位上方加一个空白区域，防止第一个箱子被看到。框大小：边框框；修改盒子模型，height=border+padding+contentoverflow:scroll;这里scroll和auto都有，不设置就不能滑动}还有什么可以实现的？微信公众号：前端立农欢迎大家关注我的公众号。有问题也可以加我的微信前端交流群。
