CSS中scrolling boxes的定义、控制方法及2016年草案资料咨询

Great question! Let's unpack this clearly since the terminology around scrolling containers in CSS has evolved a bit over time.

First, let's reference the original spec note you mentioned:

在CSS Positioned Layout Module Level 3（工作草案）2016年5月版的第6.2节粘性定位中，定义如下（笔者强调部分）：粘性定位框的定位方式与相对定位框类似，但偏移量需参照最近的带有scrolling box的祖先计算；若不存在此类祖先，则参照视口。

Put simply, a scrolling box is a container element that can generate scroll behavior. When its content exceeds its visible bounds and the right overflow properties are set, it becomes a scrolling box—users can scroll to view the offscreen content.

As you noted, this term was poorly standardized back in 2016:

• CSSOM View referenced "scrolling boxes", but CSS Overflow hadn't integrated related definitions into the CSS Box spec yet
• The "flow root" definition in CSS Box was outdated and confusing. It was close to the scrolling box concept but not a perfect match, so the sticky positioning spec used it as a temporary placeholder (far from ideal)

Since 2016, CSS specs have clarified this terminology:

• The CSS Overflow Module Level 3 (current version) formally defines the term scroll container—this is the standardized replacement for the old "scrolling box" term
• Updated versions of CSSOM View also use "scroll container" consistently, aligning with the overflow spec

To turn an element into a scroll container (the modern equivalent of a scrolling box), or disable that behavior, use the overflow property:

Enable scrolling (make it a scroll container) #

Set overflow to auto, scroll, or axis-specific values like overflow-x: auto/overflow-y: scroll. When content exceeds the container's bounds, scrollbars will appear:

.scroll-container {
  width: 300px;
  height: 200px;
  overflow: auto; /* Shows scrollbars only when content overflows */
}

Disable scrolling #

• Use overflow: visible (the default value): Content will spill outside the container, no scrollbars or scrolling behavior
• Use overflow: hidden: Overflow content gets clipped, no scrollbars or scrolling allowed

A few edge cases to note:

• Flex/grid containers can also act as scroll containers if their content overflows and you set the appropriate overflow property
• The root <html> element is a default scroll container, tied to the viewport's scrolling behavior

内容的提问来源于stack exchange，提问作者yunzen