乐趣区

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

jiezi

介绍两个和滚动定位相干的 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 拖后腿

退出移动版