From 9b346ed01f0acdbc92e861835f31c14dd8c30794 Mon Sep 17 00:00:00 2001 From: Ayke Halder Date: Thu, 14 Mar 2024 17:04:07 +0100 Subject: [PATCH] Jump to anchor results in scrolling on overflow: hidden Jumping to an anchor via link or URL is _the_ programmatic action which triggers scrolling on `overflow: hidden`. --- files/en-us/web/css/overflow/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/overflow/index.md b/files/en-us/web/css/overflow/index.md index d2e113ad2ee7bba..1fd17f2c3d2f8b9 100644 --- a/files/en-us/web/css/overflow/index.md +++ b/files/en-us/web/css/overflow/index.md @@ -44,7 +44,7 @@ The `overflow` property is specified as one or two {{CSSXref("overflow_value", " - `visible` - : Overflow content is not clipped and may be visible outside the element's padding box. The element box is not a {{glossary("scroll container")}}. This is the default value of the `overflow` property. - `hidden` - - : Overflow content is clipped at the element's padding box. There are no scroll bars, and the clipped content is not visible (i.e., clipped content is hidden), but the content still exists. User agents do not add scroll bars and also do not allow users to view the content outside the clipped region by actions such as dragging on a touch screen or using the scroll wheel on a mouse. The content _can_ be scrolled programmatically (for example, by setting the value of the {{domxref("Element.scrollLeft", "scrollLeft")}} property or the {{domxref("Element.scrollTo", "scrollTo()")}} method), in which case the element box is a scroll container. + - : Overflow content is clipped at the element's padding box. There are no scroll bars, and the clipped content is not visible (i.e., clipped content is hidden), but the content still exists. User agents do not add scroll bars and also do not allow users to view the content outside the clipped region by actions such as dragging on a touch screen or using the scroll wheel on a mouse. The content _can_ be scrolled programmatically (for example, by jumping to an anchor via URL/link or by setting the value of the {{domxref("Element.scrollLeft", "scrollLeft")}} property or the {{domxref("Element.scrollTo", "scrollTo()")}} method), in which case the element box is a scroll container. - `clip` - : Overflow content is clipped at the element's _overflow clip edge_ that is defined using the [`overflow-clip-margin`](/en-US/docs/Web/CSS/overflow-clip-margin) property. As a result, content overflows the element's padding box by the {{cssxref("<length>")}} value of `overflow-clip-margin` or by `0px` if not set. Overflow content outside the clipped region is not visible, user agents do not add a scroll bar, and programmatic scrolling is also not supported. No new [formatting context](/en-US/docs/Web/CSS/CSS_display/Block_formatting_context) is created. To establish a formatting context, use `overflow: clip` along with {{cssxref("display", "display: flow-root", "#flow-root")}}. The element box is not a scroll container. - `scroll`