在此页

• 组成特性
• 句法
• 形式定义
• 形式句法
• 规范
• 浏览器兼容性
• 相关话题

scroll-padding-block shorthand property sets the scroll padding of an element in the block dimension.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

The scroll-padding properties define offsets for the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or simply to put more breathing room between a targeted element and the edges of the scrollport.

组成特性

此特性是下列 CSS 特性的简写：

• scroll-padding-block-end
• scroll-padding-block-start

句法

/* Keyword values */
scroll-padding-block: auto;
/* <length> values */
scroll-padding-block: 10px;
scroll-padding-block: 1em .5em;
scroll-padding-block: 10%;
/* Global values */
scroll-padding-block: inherit;
scroll-padding-block: initial;
scroll-padding-block: unset;
					

值

<length-percentage>

An inwards offset from the corresponding edge of the scrollport, as a valid length or a percentage.

auto

The offset is determind by the user agent. This will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate.

形式定义

初始值	auto
适用于	scroll containers
继承	no
百分比	relative to the scroll container's scrollport
计算值	如指定
动画类型	by computed value type

形式句法

[ auto | <length-percentage> ]{1,2}
where 
<length-percentage> = <length> | <percentage>
					

规范

规范	状态	注释
CSS Scroll Snap Module Level 1 The definition of 'scroll-padding-block' in that specification.	候选推荐	初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
scroll-padding-block	Chrome 完整支持 69	Edge 完整支持 79	Firefox 完整支持 68	IE 不支持 No	Opera 完整支持 56	Safari 不支持 No	WebView Android 完整支持 69	Chrome Android 完整支持 69	Firefox Android 完整支持 68	Opera Android 完整支持 48	Safari iOS 不支持 No	Samsung Internet Android 完整支持 10.0

图例

完整支持

完整支持

不支持

不支持

元数据

• 最后修改： 2020 年 7 月 29 日

相关话题

1. CSS
2. CSS 参考
3. CSS Scroll Snap
4. 指南

   1. Basic concepts of CSS Scroll Snap
   2. Browser compatibility and Scroll Snap
5. 特性

   1. scroll-margin
   2. scroll-margin-block
   3. scroll-margin-block-end
   4. scroll-margin-block-start
   5. scroll-margin-bottom
   6. scroll-margin-inline
   7. scroll-margin-inline-end
   8. scroll-margin-inline-start
   9. scroll-margin-left
   10. scroll-margin-right
   11. scroll-margin-top
   12. scroll-padding
   13. scroll-padding-block
   14. scroll-padding-block-end
   15. scroll-padding-block-start
   16. scroll-padding-bottom
   17. scroll-padding-inline
   18. scroll-padding-inline-end
   19. scroll-padding-inline-start
   20. scroll-padding-left
   21. scroll-padding-right
   22. scroll-padding-top
   23. scroll-snap-align
   24. scroll-snap-coordinate
   25. scroll-snap-destination
   26. scroll-snap-points-x
   27. scroll-snap-points-y
   28. scroll-snap-stop
   29. scroll-snap-type
   30. scroll-snap-type-x
   31. scroll-snap-type-y