项目场景:
scroll-view作为视口实现固定列的阴影
问题描述
在编写Table组件的时候使用到了scroll-view作为视口实现固定列的阴影时发现,IOS端存在橡皮筋回弹的效果导致了scroll回调晚触发的问题。
原因分析:
overscroll-behavior
CSS 属性是用来控制滚动容器(如<div>
等)在到达滚动边界时的表现。当你滚动页面到顶部或底部时,某些浏览器(特别是移动端浏览器)会显示橡皮筋效果,甚至在滚动到顶部时可以触发下拉刷新,在滚动到底部时可以继续向下滑动去导航到其他的历史页面。
overscroll-behavior
属性的值可以是以下之一:
auto: 默认行为,允许橡皮筋效果(对应平台上的默认滚动行为)。
contain: 防止滚动链到滚动容器的祖先元素,但是允许当前元素的橡皮筋效果。
none: 取消当前滚动容器的橡皮筋效果以及滚动链行为。
解决方案:
<style lang="scss" scoped>
/deep/ .uni-scroll-view,.uni-scroll-view-content{
overscroll-behavior: none;
}
/deep/ .uni-scroll-view-content{
overscroll-behavior: none;
}
</style>