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

欢送关注我的公众号：前端侦探

介绍两个和滚动定位相干的 CSS 属性：scroll-padding 和 scroll-margin

在平时开发中，常常会碰到须要疾速定位的问题，比方常见的锚点定位

<ul>
  <li><a href="# 语法"> 语法 </a></li>
  <li><a href="# 示例"> 示例 </a></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-margin

h2{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

三、其余滚动定位形式

除了锚点定位以外，还有其余一些形式能够触发滚动定位

1. scrollIntoView

有时候，咱们须要将指定元素滚动到眼帘范畴之内，这时就须要用到这样一个 DOM 办法：scrollIntoView

element.scrollIntoView();

这个定位和后面的锚点定位一样，默认也是紧贴滚动容器的，如果设置了 scroll-margin 或者scroll-pading，也能够实现在滚动定位时主动预留肯定间距

2. focus 定位

在默认状况下，元素（比方 a 链接）在 focus 聚焦时都会主动滚动到眼帘范畴之内。和下面几种状况一样，如果有 fixed 定位元素，有可能在 focus 时被遮挡的问题。

如果设置了 scroll-margin 或者 scroll-pading，这样就 能够防止找不到焦点 的状况，确保始终都能看到焦点，上面是通过 tab 键聚焦的状况

3. 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 属性被我疏忽了，惋惜😭

不过，当初理解也不晚，上面来总结一下

1. 默认状况下主动滚动定位都是与滚动容器贴边的，有时候并不美妙
2. scroll-padding和 scroll-margin 能够在主动滚动定位时预留指定的间距
3. scroll-margin作用对象是指标元素，scroll-padding作用对象是滚动容器
4. 滚动定位形式有锚点定位、scrollIntoView定位、focus定位、还有 Scroll-snap 定位
5. 体验加强属性，兼容性还不错，次要是 safari 拖后腿

对了，这个 CSS 属性简直能够无脑应用，只有在滚动容器上加上这个属性，就能够在人不知; 鬼不觉中晋升滚动定位体验，老本极低，心愿能够多多应用。最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤

欢送关注我的公众号：前端侦探