scroll-padding-top是一个 CSS 属性,它属于 CSS Scroll Snap Module 的一部分。这个模块提供了一种方式来创建平滑滚动效果,允许网页内容在滚动停止时自动对齐到预定义的位置(即“滚动对齐点”或“滚动捕捉点”)。 scroll-padding-top属性定义了滚动容器顶部内部的额外空间,这个空间在滚动捕捉计算时会被考虑。换句话说...
当有一个position为sticky头部时,由于它占据了一定的空间,如果直接设置滚动贴合,那么元素会贴合到main元素的顶部,这样会有一部分内容被sticky头部覆盖,这种情况下我们可以给滚动的容器main元素设置scroll-padding,大小跟sticky头部的高度一致,这样就能在贴合的时候,与main元素有一定的间距,从而把头部的空间流出来。
在前面的例子中可以看到,scroll-margin是直接设置目前元素上的,scroll-padding不一样,它需要设置在滚动容器上,比如 html{ scroll-padding: 6rem } 这种方式也是可以达到相同的效果的 一般情况下,两种方式都可以自行选择,如果很清楚滚动容器是哪个,可以直接选择用scroll-padding,否则就用scroll-margin 才发现思否的锚点...
在前面的例子中可以看到,scroll-margin是直接设置目前元素上的,scroll-padding不一样,它需要设置在滚动容器上,比如: 复制 html{scroll-padding:6rem} 1. 2. 3. 这种方式也是可以达到相同的效果的。 一般情况下,两种方式都可以自行选择,如果很清楚滚动容器是哪个,可以直接选择用scroll-padding,否则就用scroll...
scroll-padding-block-start 属性用于一次性将所有滚动填充设置为块维度中滚动容器或元素的开头。 horizontal-tb 写入模式的起始面为顶部,vertical-rl 或 vertical-lr 写入模式的起始面分别为右侧或左侧。其中 horizontal-tb 代表水平从上到下,vertical-rl 或 vertical-lr 分别代表垂直从右到左和垂直从左到右。
scroll-snap-align是应用于滚动容器中子元素/子元素的 CSS 属性,它决定了每个项目在特定快照点内的对齐方式。它决定滚动停止时每个容器元素对焦的位置。 语法 .panel{ scroll-snap-align: none/start/center/end; } 该属性有四种可能的值,它们是: None值:这是scroll-snap-align属性的默认值,表示不对元素应用滚动...
scroll-padding-inline-end 属性用于一次将所有滚动填充设置为内联维度中滚动元素或容器的结束边。 horizontal-tb 写入模式的端面为右侧,verticle-lr 或 verticle-rl 写入模式的底部或顶部分别为。其中 horizontal-tb 代表水平从上到下,verticle-rl 代表垂直从右到左,verticle-lr 代表从左到右垂直。
如果滚动行为是由JS控制的，则scroll-margin是无用的。
CSS scroll-padding-inline-start 属性是用来设置一个元素内部的 滚动框内边距,滚动框的内边距会根据元素的方向设置在左侧或右侧。该属性比较少用,因为它只在某些侧边栏滚动效果中使用,但对于这些情况来说,该属性则非常有用。 语法 scroll-padding-inline-start: length | percentage; length:用长度值来设置内边距...
The snap position must be placed on the left side of the child elements for the scroll-padding-left property to work. In this example the direction property value 'rtl' changes the snap position from left side to right side of child elements. With the code like this the scroll-padding-lef...