# 非边缘捕捉

默认情况下,设置滚动捕捉内容会吸附到容器边缘。但有时候这不是我们想要的,比如顶部有固定导航栏,这时候内容就需要吸附在导航栏下面,实现这个效果可以设置scroll-padding或者scroll-margin属性, 这两个属性的设置方式跟padding或者margin的设置方式一样。

其中,scroll-padding设置在外层容器,scroll-margin设置在滚动内容上。所以,scroll-padding适合滚动吸附位置相同设置,而scroll-margin可以分别设置不同元素的不同吸附位置。

scroll-paddingscroll-margin也可以单独使用,如实现点击滚动到某个位置时,同样是到容器边缘,通过设置scroll-paddingscroll-margin就可以改变这个位置。

案例中点击更多内容定位的内容区如果没有设置scroll-padding会到页面顶部,这样导航栏就会遮住部分内容,设置了scroll-padding之后就会停留在导航以下。