CSS设置自动滚动定位的间距的方法
介绍两个和滚动定位相关的 CSS 属性:scroll-padding
[1]和 scroll-margin
[2]
在平时开发中,经常会碰到需要快速定位的问题,比如常见的锚点定位
<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[3] ,下面是 MDN 的介绍
scroll-margin
属性的值代表用于将盒元素拖拽到显示区域的拖拽滚动区域的起点。拖拽滚动区域由是由转换后边框大小的盒元素决定的,它会找到盒元素的矩形边界(在滚动的容器的坐标空间轴上),并添加指定的起点。
这个描述很官方,有点不知道在说什么😂,导致很长一段时间都不知道这个属性的真正用途。
在上面这个例子中,可以直接给目标设置scroll-margin
h2{ scroll-margin: 6rem; }
设置这个属性后,当自动滚动定位到h2
时,会自动预留6rm
的间隔(可以防止被头部遮挡),下面是演示(红框表示6rem
的间隔)
是不是非常简单,最终效果如下
其实,MDN官方已经采用了这种方式,经常看看 MDN,会发现有很多非常巧妙的实现,如下
二、还有一个 scroll-padding
和scroll-margin
比较类似的还有一个 scroll-padding[4],功能都是一样的,只是作用对象不一样。
在前面的例子中可以看到,scroll-margin
是直接设置目前元素上的,scroll-padding
不一样,它需要设置在滚动容器上,比如
html{ scroll-padding: 6rem }
这种方式也是可以达到相同的效果的
一般情况下,两种方式都可以自行选择,如果很清楚滚动容器是哪个,可以直接选择用scroll-padding
,否则就用scroll-margin
三、其他滚动定位方式
除了锚点定位以外,还有其他一些方式可以触发滚动定位
1. scrollIntoView
有时候,我们需要将指定元素滚动到视线范围之内,这时就需要用到这样一个DOM
方法:scrollIntoView[5]
element.scrollIntoView();
这个定位和前面的锚点定位一样,默认也是紧贴滚动容器的,如果设置了scroll-margin
或者scroll-pading
,也可以实现在滚动定位时自动预留一定间距
2. focus 定位
在默认情况下,元素(比如a
链接)在focus
聚焦时都会自动滚动到视线范围之内。和上面几种情况一样,如果有fixed
定位元素,有可能在focus
时被遮挡的问题。
如果设置了scroll-margin
或者scroll-pading
,这样就可以避免找不到焦点的情况,确保一直都能看到焦点,下面是通过tab
键聚焦的情况
3. scroll-snap
还有一种情况是滚动捕捉:scroll-snap-type[6],这个属性可以让滚动时自动捕捉临界点。正常情况下,滚动临界点是紧贴滚动容器的,像这样
如果希望预留一定的距离如何处理呢?还是这个scroll-margin
,下面给第二个元素设置了一定的scroll-margin
,效果如下
可以看到,在滚动到第2个元素时,提前预留了一定的距离,而且还可以设置负值,这样在滚动到第2个元素时,可以提前看到第3个的部分内容
目前我所了解的就是这几种定位方式,有其他的可以留言告知
四、兼容性和总结
最后来看一下兼容性,一个体验增强属性,兼容性还不错
这里有个疑惑是,都出来这么久了,为啥一直不知道呢?其实我也一直被 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
拖后腿
以上就是CSS设置自动滚动定位的间距的方法的详细内容,更多关于CSS设置自动滚动间距的资料请关注脚本之家其它相关文章!
相关文章
- 这篇文章主要给大家介绍了CSS中margin的用法和常见问题的分析,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。2017-06-28
css解决display:inline-block;产生的缝隙(间隙)的方法
本篇文章主要介绍了css解决display:inline-block;产生的缝隙(间隙)的方法,具有一定的参考价值,有需要的可以了解一下。2016-12-14- 给当前定高元素, 设置line-height属性, 其属性值等于当前元素的height值,今天了解到了一条相关知识, 明白这个方法的实现原理。在此与大家分享下2013-11-20
- 在网页布局中经常会用到css控制字间距和对齐方式,有些朋友对其属性不是很熟悉,下面为大家详细介绍下,感兴趣的朋有可以参考下哈2013-06-16
- 如何设置单词字体间距?在div布局中经常会遇到这样的问题,适当的间距可以友好界面,利用闲暇时间整理了一些,有需求的朋友可以参考下2012-12-30
- HTM,CSS,怎样去掉横排图片之间的间距,是我们的一大头疼问题,于是本人搜集整理一下,晒出来和大家分享,希望可以帮助你们2012-12-11
- 我们可以从表中看到在这里可以定义文本的文字间距、字母间距、装饰、对齐方式、缩进方式和行高等属性。2010-07-04
- 网页制作Webjx文章简介:本文主要讲解如何用CSS控制网页段落行间距的三个实例:1、使用百分比设置行间距,2、使用像素值设置行间距,3、使用数值来设置行间距。2009-04-02
CSS去除表格的默认间距并且制作1px的细线表-CSS教程-网页制作-网页教学
现在在所谓“div css”的风气下,很多人放弃了表格,其实应该让每个标签物尽其用,在表现数据的地方,我们还是应该使用table。但是,我们在建立table的时候,会2008-10-17
最新评论