在此页

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

scroll-padding-left property defines offsets for the left of 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 targetted element and the edges of the scrollport.

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.

句法

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

值

<length-percentage>

An inwards offset from the left 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>
where 
<length-percentage> = <length> | <percentage>
					

规范

规范	状态	注释
CSS Scroll Snap Module Level 1 The definition of 'scroll-padding-left' 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-left	Chrome 完整支持 69	Edge 完整支持 79	Firefox 完整支持 68	IE 不支持 No	Opera 完整支持 56	Safari 部分支持 11 注意事项 部分支持 11 注意事项 注意事项 Scroll padding is not applied for scrolls to fragment target or scrollIntoView() ，见 bug 179379 .	WebView Android 完整支持 69	Chrome Android 完整支持 69	Firefox Android 完整支持 68	Opera Android 完整支持 48	Safari iOS 部分支持 11 注意事项 部分支持 11 注意事项 注意事项 Scroll padding is not applied for scrolls to fragment target or scrollIntoView() ，见 bug 179379 .	Samsung Internet Android 完整支持 10.0

图例

完整支持

完整支持

部分支持

部分支持

不支持

不支持

见实现注意事项。

见实现注意事项。

元数据

• 最后修改： Jul 21, 2020

相关话题

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