在平时的开发中，我们经常会遇到需要快速定位的问题，比如普通锚点定位。
语法...
示例...
...这样，当a标签被点击时，会自动定位到对应的内容上，如下：但是anchor触发的定位默认是靠近滚动的边缘container，如果有一些定位元素，比如fixed定位的head，会被挡住，如下：可以看到，标题“Example”因为靠近顶部，所以被sticky定位的head给遮住了。那么，如何让目标元素在自动定位时预留足够大的空间呢？1、一行css就对了，看似麻烦的问题，其实一行css就可以解决，那就是scroll-margin[3]，下面是MDN的介绍。scroll-margin属性的值表示拖动滚动区域的起始点，用于将框元素拖动到显示区域。拖动滚动区域由变换后边框大小的框元素决定，它会找到框元素的矩形边界（在滚动容器的坐标空间轴上），并添加指定的起点。这个描述很官方，不知道在说什么，所以很长一段时间都不知道这个属性的真正用途。在上面的例子中，scroll-margin可以直接设置为target。h2{滚动边距：6rem;}设置该属性后，当自动滚动定位到h2时，会自动预留6rm间隔（防止被头部挡住），下面是演示（红框表示6rem间隔）很简单，最终效果如下：其实MDN官方已经采用了这种方式。如果你经常看MDN，你会发现有很多非常巧妙的实现，如下：2.scroll-padding和scroll-margin还有一个比较还有一个类似的scroll-padding[4]，功能是一样的，只是目标不一样。前面的例子可以看到，scroll-margin是直接在当??前元素上设置的，scroll-padding则不同，需要在滚动容器上设置，例如：html{scroll-padding:6rem}这个方法也可以达到同样的效果。一般来说，这两种方法都可以自己选择。如果知道是哪个滚动容器，可以直接选择使用scroll-padding，否则使用scroll-margin。3.其他滚动定位方式除了锚点定位，还有其他方式触发滚动定位。1.scrollIntoView有时候，我们需要将指定的元素滚动到视线内，这时就需要用到这样一个DOM方法：scrollIntoView[5]。元素.scrollIntoView();这个定位和之前的锚点定位一样，也是默认靠近滚动容器。如果设置了scroll-margin或scroll-pading，滚动定位时可以自动预留一定距离。2.焦点定位默认情况下，元素（如链接）在获得焦点时会自动滚动到视线。如上述情况，如果有固定定位的元素，在焦点上时可能会被挡住。如果设置了scroll-margin或者scroll-pading，这样可以避免找不到焦点的情况，保证始终能看到焦点。下面是通过tab键聚焦的情况：3.还有一种scroll-snap的情况是scrollcapture：scroll-snap-type[6]，这个属性可以在滚动的时候自动捕捉到临界点。一般情况下，滚动临界点离滚动容器很近，像这样：如果要预留一定距离，怎么处理？还是这个scroll-margin，给下面的第二个元素设置一定的scroll-margin，效果如下：可以看到滚动到第二个元素的时候，提前预留了一定的距离，也可以设置一个负值，这样当滚动到第二个元素时，可以提前看到第三个元素的一部分。4.兼容性及总结最后来看一下兼容性，一个体验提升属性，兼容性还不错（safari有点hip
