关于前端:CSS-如何设置自动滚动定位的安全间距

介绍两个和滚动定位相干的 CSS 属性:scroll-padding和 scroll-margin在平时开发中,常常会碰到须要疾速定位的问题,比方常见的锚点定位<ul>
<li>语法</li>
<li>示例</li>

</ul>
<article>

<h2 id="语法">语法</h2>

<p>…</p>
<h2 id=”示例”>示例</h2>
<p>…</p>

</article>这样,在点击a标签时会主动定位到与之绝对应的内容上,如下

然而,这种通过锚点触发的定位默认是紧贴滚动容器边缘的,如果一些定位元素,比方fixed定位的头部,就会呈现被遮挡的状况,如下

能够看到,“示例”这个题目因为紧贴顶部,导致被sticky定位的头部遮住了。那么,如何让主动定位时让指标元素预留出足够大的“平安”间距呢?一、一行 CSS解决没错,看似有些麻烦的问题其实能够通过一行 CSS 解决,那就是 scroll-margin ,上面是 MDN 的介绍scroll-margin 属性的值代表用于将盒元素拖拽到显示区域的拖拽滚动区域的终点。拖拽滚动区域由是由转换后边框大小的盒元素决定的,它会找到盒元素的矩形边界(在滚动的容器的坐标空间轴上),并增加指定的终点。这个形容很官网,有点不晓得在说什么😂,导致很长一段时间都不晓得这个属性的真正用处。在下面这个例子中,能够间接给指标设置scroll-marginh2{
scroll-margin: 6rem;
}设置这个属性后,当主动滚动定位到h2时,会主动预留6rm的距离(能够避免被头部遮挡),上面是演示(红框示意6rem的距离)

是不是非常简单,最终成果如下

其实,MDN官网曾经采纳了这种形式,常常看看 MDN,会发现有很多十分奇妙的实现,如下

二、还有一个 scroll-padding和scroll-margin比拟相似的还有一个 scroll-padding,性能都是一样的,只是作用对象不一样。在后面的例子中能够看到,scroll-margin是间接设置目前元素上的,scroll-padding不一样,它须要设置在滚动容器上,比方html{
scroll-padding: 6rem
}这种形式也是能够达到雷同的成果的

个别状况下,两种形式都能够自行抉择,如果很分明滚动容器是哪个,能够间接抉择用scroll-padding,否则就用scroll-margin才发现思否的锚点定位采纳的也是scroll-padding,点个赞~

三、其余滚动定位形式除了锚点定位以外,还有其余一些形式能够触发滚动定位1. scrollIntoView有时候,咱们须要将指定元素滚动到眼帘范畴之内,这时就须要用到这样一个DOM办法:scrollIntoViewelement.scrollIntoView();这个定位和后面的锚点定位一样,默认也是紧贴滚动容器的,如果设置了scroll-margin或者scroll-pading,也能够实现在滚动定位时主动预留肯定间距

  1. focus 定位在默认状况下,元素(比方a链接)在focus聚焦时都会主动滚动到眼帘范畴之内。和下面几种状况一样,如果有fixed定位元素,有可能在focus时被遮挡的问题。如果设置了scroll-margin或者scroll-pading,这样就能够防止找不到焦点的状况,确保始终都能看到焦点,上面是通过tab键聚焦的状况
  2. Scroll-snap还有一种状况是滚动捕获:scroll-snap-type,这个属性能够让滚动时主动捕获临界点。失常状况下,滚动临界点是紧贴滚动容器的,像这样

    如果心愿预留肯定的间隔如何解决呢?还是这个scroll-margin,上面给第二个元素设置了肯定的scroll-margin,成果如下

    能够看到,在滚动到第2个元素时,提前预留了肯定的间隔,而且还能够设置负值,这样在滚动到第2个元素时,能够提前看到第3个的局部内容

    目前我所理解的就是这几种定位形式,有其余的能够留言告知四、兼容性和总结最初来看一下兼容性,一个体验加强属性,兼容性还不错(safari有些拉胯😭)

    这里有个纳闷是,都进去这么久了,为啥始终不晓得呢?其实我也始终被 MDN 官网误导了,首先,scroll-margin和scroll-padding的官网示例中只有对于scroll-snap-type的利用场景,导致我始终误以为这个属性就是和scroll-snap-type搭配应用的,没有朝其余方向上思考。另外,从工夫上来看,这个属性的确是和scroll-snap-type简直是一起推出的(chrome上),这点从兼容性上能够看出,这样有点更深信了后面的误导

    所以,始终以来,这样一个超级好用的 CSS 属性被我疏忽了,惋惜😭不过,当初理解也不晚,上面来总结一下默认状况下主动滚动定位都是与滚动容器贴边的,有时候并不美妙scroll-padding和scroll-margin能够在主动滚动定位时预留指定的间距scroll-margin作用对象是指标元素,scroll-padding作用对象是滚动容器滚动定位形式有锚点定位、scrollIntoView定位、focus定位、还有Scroll-snap定位体验加强属性,兼容性还不错,次要是safari拖后腿

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据