CINXE.COM

<!doctype html><html lang="en"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"> <title>CSS Scroll Snap Module Level 2</title> <meta content="FPWD" name="w3c-status"> <meta content="Bikeshed version 0781e88e0, updated Fri Feb 14 13:26:46 2025 -0800" name="generator"> <link href="https://www.w3.org/TR/css-scroll-snap-2/" rel="canonical"> <meta content="92032ab38b3b9daa3dd047b670cbfc1e5a3389f0" name="revision"> <meta content="dark light" name="color-scheme"> <style>/* Boilerplate: style-autolinks */ .css.css, .property.property, .descriptor.descriptor { color: var(--a-normal-text); font-size: inherit; font-family: inherit; } .css::before, .property::before, .descriptor::before { content: "‘"; } .css::after, .property::after, .descriptor::after { content: "’"; } .property, .descriptor { /* Don't wrap property and descriptor names */ white-space: nowrap; } .type { /* CSS value <type> */ font-style: italic; } pre .property::before, pre .property::after { content: ""; } [data-link-type="property"]::before, [data-link-type="propdesc"]::before, [data-link-type="descriptor"]::before, [data-link-type="value"]::before, [data-link-type="function"]::before, [data-link-type="at-rule"]::before, [data-link-type="selector"]::before, [data-link-type="maybe"]::before { content: "‘"; } [data-link-type="property"]::after, [data-link-type="propdesc"]::after, [data-link-type="descriptor"]::after, [data-link-type="value"]::after, [data-link-type="function"]::after, [data-link-type="at-rule"]::after, [data-link-type="selector"]::after, [data-link-type="maybe"]::after { content: "’"; } [data-link-type].production::before, [data-link-type].production::after, .prod [data-link-type]::before, .prod [data-link-type]::after { content: ""; } [data-link-type=element], [data-link-type=element-attr] { font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace; font-size: .9em; } [data-link-type=element]::before { content: "<" } [data-link-type=element]::after { content: ">" } [data-link-type=biblio] { white-space: pre; } @media (prefers-color-scheme: dark) { :root { --selflink-text: black; --selflink-bg: silver; --selflink-hover-text: white; } } </style> <style>/* Boilerplate: style-colors */ /* Any --*-text not paired with a --*-bg is assumed to have a transparent bg */ :root { color-scheme: light dark; --text: black; --bg: white; --unofficial-watermark: url(https://www.w3.org/StyleSheets/TR/2016/logos/UD-watermark); --logo-bg: #1a5e9a; --logo-active-bg: #c00; --logo-text: white; --tocnav-normal-text: #707070; --tocnav-normal-bg: var(--bg); --tocnav-hover-text: var(--tocnav-normal-text); --tocnav-hover-bg: #f8f8f8; --tocnav-active-text: #c00; --tocnav-active-bg: var(--tocnav-normal-bg); --tocsidebar-text: var(--text); --tocsidebar-bg: #f7f8f9; --tocsidebar-shadow: rgba(0,0,0,.1); --tocsidebar-heading-text: hsla(203,20%,40%,.7); --toclink-text: var(--text); --toclink-underline: #3980b5; --toclink-visited-text: var(--toclink-text); --toclink-visited-underline: #054572; --heading-text: #005a9c; --hr-text: var(--text); --algo-border: #def; --del-text: red; --del-bg: transparent; --ins-text: #080; --ins-bg: transparent; --a-normal-text: #034575; --a-normal-underline: #bbb; --a-visited-text: var(--a-normal-text); --a-visited-underline: #707070; --a-hover-bg: rgba(75%, 75%, 75%, .25); --a-active-text: #c00; --a-active-underline: #c00; --blockquote-border: silver; --blockquote-bg: transparent; --blockquote-text: currentcolor; --issue-border: #e05252; --issue-bg: #fbe9e9; --issue-text: var(--text); --issueheading-text: #831616; --example-border: #e0cb52; --example-bg: #fcfaee; --example-text: var(--text); --exampleheading-text: #574b0f; --note-border: #52e052; --note-bg: #e9fbe9; --note-text: var(--text); --noteheading-text: hsl(120, 70%, 30%); --notesummary-underline: silver; --assertion-border: #aaa; --assertion-bg: #eee; --assertion-text: black; --advisement-border: orange; --advisement-bg: #fec; --advisement-text: var(--text); --advisementheading-text: #b35f00; --warning-border: red; --warning-bg: hsla(40,100%,50%,0.95); --warning-text: var(--text); --amendment-border: #330099; --amendment-bg: #F5F0FF; --amendment-text: var(--text); --amendmentheading-text: #220066; --def-border: #8ccbf2; --def-bg: #def; --def-text: var(--text); --defrow-border: #bbd7e9; --datacell-border: silver; --indexinfo-text: #707070; --indextable-hover-text: black; --indextable-hover-bg: #f7f8f9; --outdatedspec-bg: rgba(0, 0, 0, .5); --outdatedspec-text: black; --outdated-bg: maroon; --outdated-text: white; --outdated-shadow: red; --editedrec-bg: darkorange; } @media (prefers-color-scheme: dark) { :root { --text: #ddd; --bg: black; --unofficial-watermark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg fill='%23100808' transform='translate(200 200) rotate(-45) translate(-200 -200)' stroke='%23100808' stroke-width='3'%3E%3Ctext x='50%25' y='220' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EUNOFFICIAL%3C/text%3E%3Ctext x='50%25' y='305' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EDRAFT%3C/text%3E%3C/g%3E%3C/svg%3E"); --logo-bg: #1a5e9a; --logo-active-bg: #c00; --logo-text: white; --tocnav-normal-text: #999; --tocnav-normal-bg: var(--bg); --tocnav-hover-text: var(--tocnav-normal-text); --tocnav-hover-bg: #080808; --tocnav-active-text: #f44; --tocnav-active-bg: var(--tocnav-normal-bg); --tocsidebar-text: var(--text); --tocsidebar-bg: #080808; --tocsidebar-shadow: rgba(255,255,255,.1); --tocsidebar-heading-text: hsla(203,20%,40%,.7); --toclink-text: var(--text); --toclink-underline: #6af; --toclink-visited-text: var(--toclink-text); --toclink-visited-underline: #054572; --heading-text: #8af; --hr-text: var(--text); --algo-border: #456; --del-text: #f44; --del-bg: transparent; --ins-text: #4a4; --ins-bg: transparent; --a-normal-text: #6af; --a-normal-underline: #555; --a-visited-text: var(--a-normal-text); --a-visited-underline: var(--a-normal-underline); --a-hover-bg: rgba(25%, 25%, 25%, .2); --a-active-text: #f44; --a-active-underline: var(--a-active-text); --borderedblock-bg: rgba(255, 255, 255, .05); --blockquote-border: silver; --blockquote-bg: var(--borderedblock-bg); --blockquote-text: currentcolor; --issue-border: #e05252; --issue-bg: var(--borderedblock-bg); --issue-text: var(--text); --issueheading-text: hsl(0deg, 70%, 70%); --example-border: hsl(50deg, 90%, 60%); --example-bg: var(--borderedblock-bg); --example-text: var(--text); --exampleheading-text: hsl(50deg, 70%, 70%); --note-border: hsl(120deg, 100%, 35%); --note-bg: var(--borderedblock-bg); --note-text: var(--text); --noteheading-text: hsl(120, 70%, 70%); --notesummary-underline: silver; --assertion-border: #444; --assertion-bg: var(--borderedblock-bg); --assertion-text: var(--text); --advisement-border: orange; --advisement-bg: #222218; --advisement-text: var(--text); --advisementheading-text: #f84; --warning-border: red; --warning-bg: hsla(40,100%,20%,0.95); --warning-text: var(--text); --amendment-border: #330099; --amendment-bg: #080010; --amendment-text: var(--text); --amendmentheading-text: #cc00ff; --def-border: #8ccbf2; --def-bg: #080818; --def-text: var(--text); --defrow-border: #136; --datacell-border: silver; --indexinfo-text: #aaa; --indextable-hover-text: var(--text); --indextable-hover-bg: #181818; --outdatedspec-bg: rgba(255, 255, 255, .5); --outdatedspec-text: black; --outdated-bg: maroon; --outdated-text: white; --outdated-shadow: red; --editedrec-bg: darkorange; } /* In case a transparent-bg image doesn't expect to be on a dark bg, which is quite common in practice... */ img { background: white; } } </style> <style>/* Boilerplate: style-counters */ body { counter-reset: example figure issue; } .issue { counter-increment: issue; } .issue:not(.no-marker)::before { content: "Issue " counter(issue); } .example { counter-increment: example; } .example:not(.no-marker)::before { content: "Example " counter(example); } .invalid.example:not(.no-marker)::before, .illegal.example:not(.no-marker)::before { content: "Invalid Example" counter(example); } figcaption { counter-increment: figure; } figcaption:not(.no-marker)::before { content: "Figure " counter(figure) " "; } </style> <style>/* Boilerplate: style-dfn-panel */ :root { --dfnpanel-bg: #ddd; --dfnpanel-text: var(--text); --dfnpanel-target-bg: #ffc; --dfnpanel-target-outline: orange; } @media (prefers-color-scheme: dark) { :root { --dfnpanel-bg: #222; --dfnpanel-text: var(--text); --dfnpanel-target-bg: #333; --dfnpanel-target-outline: silver; } } .dfn-panel { position: absolute; z-index: 35; width: 20em; width: 300px; height: auto; max-height: 500px; overflow: auto; padding: 0.5em 0.75em; font: small Helvetica Neue, sans-serif, Droid Sans Fallback; background: var(--dfnpanel-bg); color: var(--dfnpanel-text); border: outset 0.2em; white-space: normal; /* in case it's moved into a pre */ } .dfn-panel:not(.on) { display: none; } .dfn-panel * { margin: 0; padding: 0; text-indent: 0; } .dfn-panel > b { display: block; } .dfn-panel a { color: var(--dfnpanel-text); } .dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; } .dfn-panel a:focus { outline: 5px auto Highlight; outline: 5px auto -webkit-focus-ring-color; } .dfn-panel > b + b { margin-top: 0.25em; } .dfn-panel ul { padding: 0 0 0 1em; list-style: none; } .dfn-panel li a { max-width: calc(300px - 1.5em - 1em); overflow: hidden; text-overflow: ellipsis; } .dfn-panel.activated { display: inline-block; position: fixed; left: 8px; bottom: 2em; margin: 0 auto; max-width: calc(100vw - 1.5em - .4em - .5em); max-height: 30vh; transition: left 1s ease-out, bottom 1s ease-out; } .dfn-panel .link-item:hover { text-decoration: underline; } .dfn-panel .link-item .copy-icon { opacity: 0; } .dfn-panel .link-item:hover .copy-icon, .dfn-panel .link-item .copy-icon:focus { opacity: 1; } .dfn-panel .copy-icon { display: inline-block; margin-right: 0.5em; width: 0.85em; height: 1em; border-radius: 3px; background-color: #ccc; cursor: pointer; } .dfn-panel .copy-icon .icon { width: 100%; height: 100%; background-color: #fff; display: flex; justify-content: center; align-items: center; position: relative; } .dfn-panel .copy-icon .icon::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid black; background-color: #ccc; opacity: 0.25; transform: translate(3px, -3px); } .dfn-panel .copy-icon:active .icon::before { opacity: 1; } .dfn-paneled[role="button"] { cursor: help; } .highlighted { animation: target-fade 3s; } @keyframes target-fade { from { background-color: var(--dfnpanel-target-bg); outline: 5px solid var(--dfnpanel-target-outline); } to { color: var(--a-normal-text); background-color: transparent; outline: transparent; } } </style> <style>/* Boilerplate: style-idl-highlighting */ pre.idl.highlight { background: var(--borderedblock-bg, var(--def-bg)); } </style> <style>/* Boilerplate: style-issues */ a[href].issue-return { float: right; float: inline-end; color: var(--issueheading-text); font-weight: bold; text-decoration: none; } </style> <style>/* Boilerplate: style-md-lists */ /* This is a weird hack for me not yet following the commonmark spec regarding paragraph and lists. */ [data-md] > :first-child { margin-top: 0; } [data-md] > :last-child { margin-bottom: 0; } </style> <style>/* Boilerplate: style-ref-hints */ :root { --ref-hint-bg: #ddd; --ref-hint-text: var(--text); } @media (prefers-color-scheme: dark) { :root { --ref-hint-bg: #222; --ref-hint-text: var(--text); } } .ref-hint { display: inline-block; position: absolute; z-index: 35; width: 20em; width: 300px; height: auto; max-height: 500px; overflow: auto; padding: 0.5em 0.5em; font: small Helvetica Neue, sans-serif, Droid Sans Fallback; background: var(--ref-hint-bg); color: var(--ref-hint-text); border: outset 0.2em; white-space: normal; /* in case it's moved into a pre */ } .ref-hint * { margin: 0; padding: 0; text-indent: 0; } .ref-hint ul { padding: 0 0 0 1em; list-style: none; } </style> <style>/* Boilerplate: style-selflinks */ :root { --selflink-text: white; --selflink-bg: gray; --selflink-hover-text: black; } .heading, .issue, .note, .example, li, dt { position: relative; } a.self-link { position: absolute; top: 0; left: calc(-1 * (3.5rem - 26px)); width: calc(3.5rem - 26px); height: 2em; text-align: center; border: none; transition: opacity .2s; opacity: .5; } a.self-link:hover { opacity: 1; } .heading > a.self-link { font-size: 83%; } .example > a.self-link, .note > a.self-link, .issue > a.self-link { /* These blocks are overflow:auto, so positioning outside doesn't work. */ left: auto; right: 0; } li > a.self-link { left: calc(-1 * (3.5rem - 26px) - 2em); } dfn > a.self-link { top: auto; left: auto; opacity: 0; width: 1.5em; height: 1.5em; background: var(--selflink-bg); color: var(--selflink-text); font-style: normal; transition: opacity .2s, background-color .2s, color .2s; } dfn:hover > a.self-link { opacity: 1; } dfn > a.self-link:hover { color: var(--selflink-hover-text); } a.self-link::before { content: "¶"; } .heading > a.self-link::before { content: "§"; } dfn > a.self-link::before { content: "#"; } </style> <style>/* Boilerplate: style-syntax-highlighting */ code.highlight { padding: .1em; border-radius: .3em; } pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; } .highlight:not(.idl) { background: rgba(0, 0, 0, .03); } c-[a] { color: #990055 } /* Keyword.Declaration */ c-[b] { color: #990055 } /* Keyword.Type */ c-[c] { color: #708090 } /* Comment */ c-[d] { color: #708090 } /* Comment.Multiline */ c-[e] { color: #0077aa } /* Name.Attribute */ c-[f] { color: #669900 } /* Name.Tag */ c-[g] { color: #222222 } /* Name.Variable */ c-[k] { color: #990055 } /* Keyword */ c-[l] { color: #000000 } /* Literal */ c-[m] { color: #000000 } /* Literal.Number */ c-[n] { color: #0077aa } /* Name */ c-[o] { color: #999999 } /* Operator */ c-[p] { color: #999999 } /* Punctuation */ c-[s] { color: #a67f59 } /* Literal.String */ c-[t] { color: #a67f59 } /* Literal.String.Single */ c-[u] { color: #a67f59 } /* Literal.String.Double */ c-[cp] { color: #708090 } /* Comment.Preproc */ c-[c1] { color: #708090 } /* Comment.Single */ c-[cs] { color: #708090 } /* Comment.Special */ c-[kc] { color: #990055 } /* Keyword.Constant */ c-[kn] { color: #990055 } /* Keyword.Namespace */ c-[kp] { color: #990055 } /* Keyword.Pseudo */ c-[kr] { color: #990055 } /* Keyword.Reserved */ c-[ld] { color: #000000 } /* Literal.Date */ c-[nc] { color: #0077aa } /* Name.Class */ c-[no] { color: #0077aa } /* Name.Constant */ c-[nd] { color: #0077aa } /* Name.Decorator */ c-[ni] { color: #0077aa } /* Name.Entity */ c-[ne] { color: #0077aa } /* Name.Exception */ c-[nf] { color: #0077aa } /* Name.Function */ c-[nl] { color: #0077aa } /* Name.Label */ c-[nn] { color: #0077aa } /* Name.Namespace */ c-[py] { color: #0077aa } /* Name.Property */ c-[ow] { color: #999999 } /* Operator.Word */ c-[mb] { color: #000000 } /* Literal.Number.Bin */ c-[mf] { color: #000000 } /* Literal.Number.Float */ c-[mh] { color: #000000 } /* Literal.Number.Hex */ c-[mi] { color: #000000 } /* Literal.Number.Integer */ c-[mo] { color: #000000 } /* Literal.Number.Oct */ c-[sb] { color: #a67f59 } /* Literal.String.Backtick */ c-[sc] { color: #a67f59 } /* Literal.String.Char */ c-[sd] { color: #a67f59 } /* Literal.String.Doc */ c-[se] { color: #a67f59 } /* Literal.String.Escape */ c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */ c-[si] { color: #a67f59 } /* Literal.String.Interpol */ c-[sx] { color: #a67f59 } /* Literal.String.Other */ c-[sr] { color: #a67f59 } /* Literal.String.Regex */ c-[ss] { color: #a67f59 } /* Literal.String.Symbol */ c-[vc] { color: #0077aa } /* Name.Variable.Class */ c-[vg] { color: #0077aa } /* Name.Variable.Global */ c-[vi] { color: #0077aa } /* Name.Variable.Instance */ c-[il] { color: #000000 } /* Literal.Number.Integer.Long */ @media (prefers-color-scheme: dark) { .highlight:not(.idl) { background: rgba(255, 255, 255, .05); } c-[a] { color: #d33682 } /* Keyword.Declaration */ c-[b] { color: #d33682 } /* Keyword.Type */ c-[c] { color: #2aa198 } /* Comment */ c-[d] { color: #2aa198 } /* Comment.Multiline */ c-[e] { color: #268bd2 } /* Name.Attribute */ c-[f] { color: #b58900 } /* Name.Tag */ c-[g] { color: #cb4b16 } /* Name.Variable */ c-[k] { color: #d33682 } /* Keyword */ c-[l] { color: #657b83 } /* Literal */ c-[m] { color: #657b83 } /* Literal.Number */ c-[n] { color: #268bd2 } /* Name */ c-[o] { color: #657b83 } /* Operator */ c-[p] { color: #657b83 } /* Punctuation */ c-[s] { color: #6c71c4 } /* Literal.String */ c-[t] { color: #6c71c4 } /* Literal.String.Single */ c-[u] { color: #6c71c4 } /* Literal.String.Double */ c-[ch] { color: #2aa198 } /* Comment.Hashbang */ c-[cp] { color: #2aa198 } /* Comment.Preproc */ c-[cpf] { color: #2aa198 } /* Comment.PreprocFile */ c-[c1] { color: #2aa198 } /* Comment.Single */ c-[cs] { color: #2aa198 } /* Comment.Special */ c-[kc] { color: #d33682 } /* Keyword.Constant */ c-[kn] { color: #d33682 } /* Keyword.Namespace */ c-[kp] { color: #d33682 } /* Keyword.Pseudo */ c-[kr] { color: #d33682 } /* Keyword.Reserved */ c-[ld] { color: #657b83 } /* Literal.Date */ c-[nc] { color: #268bd2 } /* Name.Class */ c-[no] { color: #268bd2 } /* Name.Constant */ c-[nd] { color: #268bd2 } /* Name.Decorator */ c-[ni] { color: #268bd2 } /* Name.Entity */ c-[ne] { color: #268bd2 } /* Name.Exception */ c-[nf] { color: #268bd2 } /* Name.Function */ c-[nl] { color: #268bd2 } /* Name.Label */ c-[nn] { color: #268bd2 } /* Name.Namespace */ c-[py] { color: #268bd2 } /* Name.Property */ c-[ow] { color: #657b83 } /* Operator.Word */ c-[mb] { color: #657b83 } /* Literal.Number.Bin */ c-[mf] { color: #657b83 } /* Literal.Number.Float */ c-[mh] { color: #657b83 } /* Literal.Number.Hex */ c-[mi] { color: #657b83 } /* Literal.Number.Integer */ c-[mo] { color: #657b83 } /* Literal.Number.Oct */ c-[sa] { color: #6c71c4 } /* Literal.String.Affix */ c-[sb] { color: #6c71c4 } /* Literal.String.Backtick */ c-[sc] { color: #6c71c4 } /* Literal.String.Char */ c-[dl] { color: #6c71c4 } /* Literal.String.Delimiter */ c-[sd] { color: #6c71c4 } /* Literal.String.Doc */ c-[se] { color: #6c71c4 } /* Literal.String.Escape */ c-[sh] { color: #6c71c4 } /* Literal.String.Heredoc */ c-[si] { color: #6c71c4 } /* Literal.String.Interpol */ c-[sx] { color: #6c71c4 } /* Literal.String.Other */ c-[sr] { color: #6c71c4 } /* Literal.String.Regex */ c-[ss] { color: #6c71c4 } /* Literal.String.Symbol */ c-[fm] { color: #268bd2 } /* Name.Function.Magic */ c-[vc] { color: #cb4b16 } /* Name.Variable.Class */ c-[vg] { color: #cb4b16 } /* Name.Variable.Global */ c-[vi] { color: #cb4b16 } /* Name.Variable.Instance */ c-[vm] { color: #cb4b16 } /* Name.Variable.Magic */ c-[il] { color: #657b83 } /* Literal.Number.Integer.Long */ } </style> <style>/* Boilerplate: style-var-click-highlighting */ /* Colors were chosen in Lab using https://nixsensor.com/free-color-converter/ D50 2deg illuminant, L in [0,100], a and b in [-128, 128] 0 = lab(85,0,85) 1 = lab(85,80,30) 2 = lab(85,-40,40) 3 = lab(85,-50,0) 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) For darkmode: 0 = oklab(50% 0% 108%) 1 = oklab(50% -51% 51%) 2 = oklab(50% -64% -20%) 3 = oklab(50% 6% 19%) 4 = oklab(50% -12% -64%) 5 = oklab(50% 44% -19%) 6 = oklab(50% 102% 38%) */ [data-algorithm] var { cursor: pointer; } var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } var[data-var-color] { --var-bg: #F4D200; } var[data-var-color="1"] { --var-bg: #FF87A2; } var[data-var-color="2"] { --var-bg: #96E885; } var[data-var-color="3"] { --var-bg: #3EEED2; } var[data-var-color="4"] { --var-bg: #EACFB6; } var[data-var-color="5"] { --var-bg: #82DDFF; } var[data-var-color="6"] { --var-vg: #FFBCF2; } @media (prefers-color-scheme: dark) { var[data-var-color] { --var-bg: #bc1a00; } var[data-var-color="1"] { --var-bg: #007f00; } var[data-var-color="2"] { --var-bg: #008698; } var[data-var-color="3"] { --var-bg: #7f5b2b; } var[data-var-color="4"] { --var-bg: #004df3; } var[data-var-color="5"] { --var-bg: #a1248a; } var[data-var-color="6"] { --var-vg: #ff0000; } } </style> <link href="https://www.w3.org/StyleSheets/TR/2021/W3C-WD" rel="stylesheet"> <link href="https://www.w3.org/StyleSheets/TR/2021/dark.css" media="(prefers-color-scheme: dark)" rel="stylesheet" type="text/css"> <body class="h-entry"> <div class="head"> <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2021/logos/W3C" width="72"> </a> </p> <h1 class="p-name no-ref" id="title">CSS Scroll Snap Module Level 2</h1> <p id="w3c-state"><a href="https://www.w3.org/standards/types/#FPWD">W3C First Public Working Draft</a>, <time class="dt-updated" datetime="2024-12-16">16 December 2024</time></p> <details open> <summary>More details about this document</summary> <div data-fill-with="spec-metadata"> <dl> <dt>This version: <dd><a class="u-url" href="https://www.w3.org/TR/2024/FPWD-css-scroll-snap-2-20241216/">https://www.w3.org/TR/2024/FPWD-css-scroll-snap-2-20241216/</a> <dt>Latest published version: <dd><a href="https://www.w3.org/TR/css-scroll-snap-2/">https://www.w3.org/TR/css-scroll-snap-2/</a> <dt>Editor's Draft: <dd><a href="https://drafts.csswg.org/css-scroll-snap-2/">https://drafts.csswg.org/css-scroll-snap-2/</a> <dt>History: <dd><a class="u-url" href="https://www.w3.org/standards/history/css-scroll-snap-2/">https://www.w3.org/standards/history/css-scroll-snap-2/</a> <dt>Implementation Report: <dd><a href="https://wpt.fyi/results/css/css-scroll-snap">https://wpt.fyi/results/css/css-scroll-snap</a> <dt>Feedback: <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-scroll-snap-2">CSSWG Issues Repository</a> <dd><a href="#issues-index">Inline In Spec</a> <dt class="editor">Editors: <dd class="editor p-author h-card vcard" data-editor-id="42199"><a class="p-name fn u-url url" href="http://xanthir.com/contact/">Tab Atkins-Bittner</a> (<span class="p-org org">Google</span>) <dd class="editor p-author h-card vcard" data-editor-id="35400"><a class="p-name fn u-url url" href="http://fantasai.inkedblade.net/contact">Elika J. Etemad / fantasai</a> (<span class="p-org org">Apple</span>) <dd class="editor p-author h-card vcard" data-editor-id="112669"><a class="p-name fn u-url url" href="https://nerdy.dev">Adam Argyle</a> (<span class="p-org org">Google</span>) <dt class="editor">Former Editors: <dd class="editor p-author h-card vcard" data-editor-id="62267"><span class="p-name fn">Matt Rakow</span> (<span class="p-org org">Microsoft</span>) <dd class="editor p-author h-card vcard" data-editor-id="45616"><span class="p-name fn">Jacob Rossi</span> (<span class="p-org org">Microsoft</span>) <dt>Suggest an Edit for this Spec: <dd><a href="https://github.com/w3c/csswg-drafts/blob/main/css-scroll-snap-2/Overview.bs">GitHub Editor</a> </dl> </div> </details> <div data-fill-with="warning"></div> <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/policies/#copyright">Copyright</a> © 2024 <a href="https://www.w3.org/">World Wide Web Consortium</a>. <abbr title="World Wide Web Consortium">W3C</abbr><sup>®</sup> <a href="https://www.w3.org/policies/#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/policies/#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/copyright/software-license/" rel="license" title="W3C Software and Document License">permissive document license</a> rules apply. </p> <hr title="Separator for header"> </div> <div class="p-summary" data-fill-with="abstract"> <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2> <p>This module contains features to control panning and scrolling behavior with “snap positions”.</p> <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, etc. <script> const githubPrefix = "https://w3c.github.io/csswg-drafts/"; if(location.href.slice(0, githubPrefix.length) == githubPrefix) { const suffix = location.href.slice(githubPrefix.length); const draftUrl = "https://drafts.csswg.org/" + suffix; window.location.replace(draftUrl); } </script> </div> <h2 class="no-num no-toc no-ref heading settled" id="sotd"><span class="content">Status of this document</span></h2> <div data-fill-with="status"> <p><em>This section describes the status of this document at the time of its publication. A list of current W3C publications and the latest revision of this technical report can be found in the <a href="https://www.w3.org/TR/">W3C technical reports index at https://www.w3.org/TR/.</a></em> </p> <p> This document was published by the <a href="https://www.w3.org/groups/wg/css">CSS Working Group</a> as a <strong>First Public Working Draft</strong> using the <a href="https://www.w3.org/policies/process/20231103/#recs-and-notes">Recommendation track</a>. Publication as a First Public Working Draft does not imply endorsement by <abbr title="World Wide Web Consortium">W3C</abbr> and its Members. </p> <p> This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress. </p> <p>Please send feedback by <a href="https://github.com/w3c/csswg-drafts/issues">filing issues in GitHub</a> (preferred), including the spec code “css-scroll-snap” in the title, like this: “[css-scroll-snap] <i>…summary of comment…</i>”. All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>. Alternately, feedback can be sent to the (<a href="https://lists.w3.org/Archives/Public/www-style/">archived</a>) public mailing list <a href="mailto:www-style@w3.org?Subject=%5Bcss-scroll-snap%5D%20PUT%20SUBJECT%20HERE">www-style@w3.org</a>. </p> <p>This document is governed by the <a href="https://www.w3.org/policies/process/20231103/" id="w3c_process_revision">03 November 2023 W3C Process Document</a>. </p> <p>This document was produced by a group operating under the <a href="https://www.w3.org/policies/patent-policy/20200915/">W3C Patent Policy</a>. W3C maintains a <a href="https://www.w3.org/groups/wg/css/ipr" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/policies/patent-policy/20200915/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/policies/patent-policy/20200915/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p> <p>A test suite and an implementation report will be produced during the CR period.</p> </div> <div data-fill-with="at-risk"></div> <nav data-fill-with="table-of-contents" id="toc"> <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2> <ol class="toc" role="directory"> <li> <a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a> <ol class="toc"> <li><a href="#first-layout"><span class="secno">1.1</span> <span class="content">First Layout</span></a> </ol> <li><a href="#examples"><span class="secno">2</span> <span class="content">Motivating Examples</span></a> <li> <a href="#properties-on-the-scroll-container"><span class="secno">3</span> <span class="content">Setting Where Scroll Starts</span></a> <ol class="toc"> <li> <a href="#scroll-initial-target"><span class="secno">3.1</span> <span class="content">The <span class="property">scroll-initial-target</span> property</span></a> <ol class="toc"> <li><a href="#initial-scroll-target"><span class="secno">3.1.1</span> <span class="content"> Initial scroll target</span></a> <li><a href="#scroll-initial-target-propdef"><span class="secno">3.1.2</span> <span class="content">scroll-initial-target Property Definition</span></a> <li><a href="#scroll-initial-target-with-place-content"><span class="secno">3.1.3</span> <span class="content"> Interaction with <span class="property">place-content</span></span></a> <li><a href="#scroll-initial-target-fragment-navigation"><span class="secno">3.1.4</span> <span class="content"> Post-first layout arrivals</span></a> </ol> </ol> <li> <a href="#styling-snapped"><span class="secno">4</span> <span class="content">Styling Snapped Items</span></a> <ol class="toc"> <li><a href="#snapped"><span class="secno">4.1</span> <span class="content">The Snapped-element Pseudo-class: <span class="css">:snapped</span></span></a> </ol> <li> <a href="#snap-events"><span class="secno">5</span> <span class="content">Snap Events</span></a> <ol class="toc"> <li> <a href="#scrollsnapchange-and-scrollsnapchanging"><span class="secno">5.1</span> <span class="content"><code class="idl"><span>scrollsnapchange</span></code> and <code class="idl"><span>scrollsnapchanging</span></code></span></a> <ol class="toc"> <li><a href="#snapTarget"><span class="secno">5.1.1</span> <span class="content"> Snap Targets</span></a> <li><a href="#scrollsnapchange"><span class="secno">5.1.2</span> <span class="content"> <code class="idl"><span>scrollsnapchange</span></code></span></a> <li><a href="#scrollsnapchanging"><span class="secno">5.1.3</span> <span class="content"> scrollsnapchanging </span></a> <li><a href="#snap-events-on-layout-changes"><span class="secno">5.1.4</span> <span class="content">Snap Events due to Layout Changes </span></a> </ol> <li><a href="#snapevent-interface"><span class="secno">5.2</span> <span class="content">SnapEvent interface</span></a> </ol> <li> <a href="#event-handlers"><span class="secno"></span> <span class="content">Appendix A: Event Handlers</span></a> <ol class="toc"> <li><a href="#event-handlers-on-elements-document-and-window-objects"><span class="secno"></span> <span class="content">Event handlers on elements, Document objects and Window objects</span></a> <li> <a href="#interface-globaleventhandlers"><span class="secno"></span> <span class="content">Extensions to the <code>GlobalEventHandlers</code> Interface Mixin</span></a> <ol class="toc"> <li><a href="#interface-globaleventhandlers-idl"><span class="secno"></span> <span class="content">IDL Definition</span></a> </ol> </ol> <li><a href="#privacy"><span class="secno">6</span> <span class="content">Privacy Considerations</span></a> <li><a href="#security"><span class="secno">7</span> <span class="content">Security Considerations</span></a> <li> <a href="#w3c-conformance"><span class="secno"></span> <span class="content"> Conformance</span></a> <ol class="toc"> <li><a href="#w3c-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a> <li><a href="#w3c-conformance-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a> <li> <a href="#w3c-partial"><span class="secno"></span> <span class="content"> Partial implementations</span></a> <ol class="toc"> <li><a href="#w3c-conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a> </ol> <li><a href="#w3c-testing"><span class="secno"></span> <span class="content"> Non-experimental implementations</span></a> </ol> <li> <a href="#index"><span class="secno"></span> <span class="content">Index</span></a> <ol class="toc"> <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a> <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a> </ol> <li> <a href="#references"><span class="secno"></span> <span class="content">References</span></a> <ol class="toc"> <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a> </ol> <li><a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a> <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a> <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a> </ol> </nav> <main> <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#intro"></a></h2> <p><em>This section is not normative.</em></p> <p><em>This is currently a delta spec over Scroll Snap 1.</em></p> <p>Scroll experiences don’t always start at the beginning. Interactions with carousels, swipe controls, and listviews often intend to begin from some element which might not be positioned at the beginning of the scroll container. JavaScript is required to make the scroll container initially scrolled to that element. By enabling CSS to specify that an element should be initially scrolled to, both users, page authors and browsers benefit.</p> <p>In addition to setting an initial scroll target, developers need insights and events into Scroll Snap. Events like which element is snapped on which axis, when the snap event is changing, when snap completes and conveniences for snapping to children programmatically.</p> <h3 class="heading settled" data-level="1.1" id="first-layout"><span class="secno">1.1. </span><span class="content">First Layout</span><a class="self-link" href="#first-layout"></a></h3> <p>This event should follow the Animation code path. When animation objects are created and fire events, this is when a box has it’s first layout.</p> <h2 class="heading settled" data-level="2" id="examples"><span class="secno">2. </span><span class="content">Motivating Examples</span><a class="self-link" href="#examples"></a></h2> <div class="example" id="example-499b9356"> <a class="self-link" href="#example-499b9356"></a> A carousel that starts scrolled to the middle image: <pre class="lang-css highlight">.carousel <c- p>{</c-> <c- k>overflow-inline</c-><c- p>:</c-> auto<c- p>;</c-> <c- p>}</c-> .carousel .origin <c- p>{</c-> <c- k>scroll-initial-target</c-><c- p>:</c-> nearest<c- p>;</c-> <c- p>}</c-> </pre> <pre class="lang-html highlight"><c- p><</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"carousel"</c-><c- p>></c-> <c- p><</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>"img1.jpg"</c-><c- p>></c-> <c- p><</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>"img2.jpg"</c-><c- p>></c-> <c- p><</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>"img3.jpg"</c-> <c- e>class</c-><c- o>=</c-><c- s>"origin"</c-><c- p>></c-> <c- p><</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>"img4.jpg"</c-><c- p>></c-> <c- p><</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>"img5.jpg"</c-><c- p>></c-> <c- p></</c-><c- f>div</c-><c- p>></c-> </pre> </div> <div class="example" id="example-408d7b4b"> <a class="self-link" href="#example-408d7b4b"></a> A search bar is available when the user scrolls back to the top: <pre class="lang-css highlight">.scrollport <c- p>{</c-> <c- k>overflow-block</c-><c- p>:</c-> auto<c- p>;</c-> <c- p>}</c-> main <c- p>{</c-> <c- k>scroll-initial-target</c-><c- p>:</c-> nearest<c- p>;</c-> <c- p>}</c-> </pre> <pre class="lang-html highlight"><c- p><</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"scrollport"</c-><c- p>></c-> <c- p><</c-><c- f>nav</c-><c- p>></c-> ... <c- p></</c-><c- f>nav</c-><c- p>></c-> <c- p><</c-><c- f>main</c-><c- p>></c-> ... <c- p></</c-><c- f>main</c-><c- p>></c-> <c- p></</c-><c- f>div</c-><c- p>></c-> </pre> </div> <h2 class="heading settled" data-level="3" id="properties-on-the-scroll-container"><span class="secno">3. </span><span class="content">Setting Where Scroll Starts</span><a class="self-link" href="#properties-on-the-scroll-container"></a></h2> <h3 class="heading settled" data-level="3.1" id="scroll-initial-target"><span class="secno">3.1. </span><span class="content">The <a class="property css" data-link-type="property" href="#propdef-scroll-initial-target" id="ref-for-propdef-scroll-initial-target">scroll-initial-target</a> property</span><a class="self-link" href="#scroll-initial-target"></a></h3> <p class="issue" id="issue-cd47e978"><a class="self-link" href="#issue-cd47e978"></a> The name "scroll-initial-target" is chosen as the least worst option which expresses that it should be scrolled to when its scroll container first shows up on the page. A better name for the property would be very much welcome. <a href="https://github.com/w3c/csswg-drafts/issues/11173">[Issue #11173]</a></p> <h4 class="heading settled dfn-paneled" data-dfn-type="dfn" data-export data-level="3.1.1" data-lt="Initial scroll target" id="initial-scroll-target"><span class="secno">3.1.1. </span><span class="content"> Initial scroll target</span><a class="self-link" href="#initial-scroll-target" id="ref-for-initial-scroll-target"></a></h4> <p>The <a data-link-type="dfn" href="#initial-scroll-target" id="ref-for-initial-scroll-target⑧">initial scroll target</a> of a <a data-link-type="dfn" href="https://www.w3.org/TR/css-overflow-3/#scroll-container" id="ref-for-scroll-container">scroll container</a> <var>scrollcontainer</var> is an element or pseudo-element whose <a class="property css" data-link-type="property" href="#propdef-scroll-initial-target" id="ref-for-propdef-scroll-initial-target①">scroll-initial-target</a>property is non-<a class="css" data-link-type="maybe" href="#valdef-scroll-initial-target-none" id="ref-for-valdef-scroll-initial-target-none">none</a> and whose nearest <span id="ref-for-scroll-container①">scroll container</span> is <var>scrollcontainer</var>. When multiple such elements or pseudo-elements exist, user-agents should select the one which comes first in <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-order" id="ref-for-concept-tree-order">tree order</a>. When no such element or pseudo-element exists, <var>scrollcontainer</var>’s <span id="ref-for-initial-scroll-target①">initial scroll target</span> is null.</p> <div class="algorithm" data-algorithm="determine the initial scroll position from an initial scroll target"> If the <a data-link-type="dfn" href="#initial-scroll-target" id="ref-for-initial-scroll-target②">initial scroll target</a> of a <a data-link-type="dfn" href="https://www.w3.org/TR/css-overflow-3/#scroll-container" id="ref-for-scroll-container②">scroll container</a> is not null, it should be used to determine the <a data-link-type="dfn" href="https://www.w3.org/TR/css-overflow-3/#initial-scroll-position" id="ref-for-initial-scroll-position">initial scroll position</a> of <var>scrollcontainer</var> by running the following steps: <ol> <li data-md> <p>Let <var>target</var> be the <a data-link-type="dfn" href="#initial-scroll-target" id="ref-for-initial-scroll-target③">initial scroll target</a> for <var>scrollcontainer</var>.</p> <li data-md> <p>Let <var>position</var> be the result of running the steps to <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-view-1/#determine-the-scroll-into-view-position" id="ref-for-determine-the-scroll-into-view-position">determine the scroll-into-view position</a> of <var>target</var> with <var>behavior</var> set to "auto", <var>block</var> set to "start", <var>inline</var> set to "nearest", and <var>scrolling box</var> set to <var>scrollcontainer</var>.</p> <li data-md> <p>Set <var>scrollcontainer</var>’s <a data-link-type="dfn" href="https://www.w3.org/TR/css-overflow-3/#initial-scroll-position" id="ref-for-initial-scroll-position①">initial scroll position</a> to <var>position</var>.</p> </ol> </div> <h4 class="heading settled" data-level="3.1.2" id="scroll-initial-target-propdef"><span class="secno">3.1.2. </span><span class="content">scroll-initial-target Property Definition</span><a class="self-link" href="#scroll-initial-target-propdef"></a></h4> <table class="def propdef" data-link-for-hint="scroll-initial-target"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-scroll-initial-target">scroll-initial-target</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">none <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one">|</a> nearest <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td><a class="css" data-link-type="maybe" href="#valdef-scroll-initial-target-none" id="ref-for-valdef-scroll-initial-target-none①">none</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a href="https://www.w3.org/TR/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>N/A <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>none </table> <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="scroll-initial-target" data-dfn-type="value" data-export id="valdef-scroll-initial-target-none">none</dfn> <dd>The element is not an <a data-link-type="dfn" href="#initial-scroll-target" id="ref-for-initial-scroll-target④">initial scroll target</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="scroll-initial-target" data-dfn-type="value" data-export id="valdef-scroll-initial-target-nearest">nearest</dfn> <dd>The element is potentially an <a data-link-type="dfn" href="#initial-scroll-target" id="ref-for-initial-scroll-target⑤">initial scroll target</a> for its nearest <a data-link-type="dfn" href="https://www.w3.org/TR/css-overflow-3/#scroll-container" id="ref-for-scroll-container③">scroll container</a> ancestor. </dl> <h4 class="heading settled" data-level="3.1.3" id="scroll-initial-target-with-place-content"><span class="secno">3.1.3. </span><span class="content"> Interaction with <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-align-3/#propdef-place-content" id="ref-for-propdef-place-content">place-content</a></span><a class="self-link" href="#scroll-initial-target-with-place-content"></a></h4> <p>If a <a data-link-type="dfn" href="https://www.w3.org/TR/css-overflow-3/#scroll-container" id="ref-for-scroll-container④">scroll container’s</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-overflow-3/#initial-scroll-position" id="ref-for-initial-scroll-position②">initial scroll position</a> is potentially set by both a <a data-link-type="dfn" href="https://www.w3.org/TR/css-align-3/#content-distribution-properties" id="ref-for-content-distribution-properties">content-distribution property</a> and by <a class="property css" data-link-type="property" href="#propdef-scroll-initial-target" id="ref-for-propdef-scroll-initial-target②">scroll-initial-target</a> on a descendant, <span class="property" id="ref-for-propdef-scroll-initial-target③">scroll-initial-target</span> wins.</p> <h4 class="heading settled" data-level="3.1.4" id="scroll-initial-target-fragment-navigation"><span class="secno">3.1.4. </span><span class="content"> Post-first layout arrivals</span><a class="self-link" href="#scroll-initial-target-fragment-navigation"></a></h4> <p>While the document is being <a href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#updating-the-document">updated</a>, a <a data-link-type="dfn" href="https://www.w3.org/TR/css-overflow-3/#scroll-container" id="ref-for-scroll-container⑤">scroll container’s</a> <a data-link-type="dfn" href="#initial-scroll-target" id="ref-for-initial-scroll-target⑥">initial scroll target</a> might arrive after that <span id="ref-for-scroll-container⑥">scroll container</span> has been laid out. If this happens, user agents should still scroll to the <span id="ref-for-initial-scroll-target⑦">initial scroll target</span> unless the user agent has reason to believe the user is no longer interested in scrolling to the <a data-link-type="dfn" href="https://www.w3.org/TR/css-overflow-3/#initial-scroll-position" id="ref-for-initial-scroll-position③">initial scroll position</a>.</p> <h2 class="heading settled" data-level="4" id="styling-snapped"><span class="secno">4. </span><span class="content">Styling Snapped Items</span><a class="self-link" href="#styling-snapped"></a></h2> <p class="issue" id="issue-1a2ac20b"><a class="self-link" href="#issue-1a2ac20b"></a> The ':snapped' pseudo-class is being dropped in favor of a <a href="https://drafts.csswg.org/css-contain-4/scroll_state_explainer.html">container state query</a> approach.</p> <h3 class="heading settled" data-level="4.1" id="snapped"><span class="secno">4.1. </span><span class="content">The Snapped-element Pseudo-class: <a class="css" data-link-type="maybe" href="#selectordef-snapped" id="ref-for-selectordef-snapped">:snapped</a></span><a class="self-link" href="#snapped"></a></h3> <p>The <dfn class="dfn-paneled css" data-dfn-type="selector" data-export id="selectordef-snapped">:snapped</dfn> pseudo-class matches any scroll snap targets, regardless of axis. The longform physical and logical pseudo-class selectors allow for more finite snapped children styling as they can target an individual axis.</p> <p>More specific options are defined as follows:</p> <dl> <dt><dfn class="dfn-paneled css" data-dfn-type="selector" data-export id="selectordef-snapped-x">:snapped-x</dfn> <dd> Matches the child snapped on the horizontal axis. <dt><dfn class="dfn-paneled css" data-dfn-type="selector" data-export id="selectordef-snapped-y">:snapped-y</dfn> <dd> Matches the child snapped on the vertical axis. <dt><dfn class="dfn-paneled css" data-dfn-type="selector" data-export id="selectordef-snapped-inline">:snapped-inline</dfn> <dd> Matches the child snapped on the <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/visuren.html#value-def-inline" id="ref-for-value-def-inline">inline</a> axis. <dt><dfn class="dfn-paneled css" data-dfn-type="selector" data-export id="selectordef-snapped-block">:snapped-block</dfn> <dd> Matches the child snapped on the <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/visuren.html#value-def-block" id="ref-for-value-def-block">block</a> axis. </dl> <p class="note" role="note"><span class="marker">Note:</span> <a href="https://github.com/w3c/csswg-drafts/issues/6985#issuecomment-1049036401">Issue #6985</a><br> Need to figure out resolution of the initial frame.</p> <h2 class="heading settled" data-level="5" id="snap-events"><span class="secno">5. </span><span class="content">Snap Events</span><a class="self-link" href="#snap-events"></a></h2> <h3 class="heading settled" data-level="5.1" id="scrollsnapchange-and-scrollsnapchanging"><span class="secno">5.1. </span><span class="content"><code class="idl"><a data-link-type="idl" href="#eventdef-snapevent-scrollsnapchange" id="ref-for-eventdef-snapevent-scrollsnapchange">scrollsnapchange</a></code> and <code class="idl"><a data-link-type="idl" href="#eventdef-snapevent-scrollsnapchanging" id="ref-for-eventdef-snapevent-scrollsnapchanging">scrollsnapchanging</a></code></span><a class="self-link" href="#scrollsnapchange-and-scrollsnapchanging"></a></h3> <p>CSS scroll snap points are often used as a mechanism to create scroll interactive "selection" components, where selection is determined with JavaScript intersection observers and a scroll end guestimate. By creating a built-in event, the invisible state will become actionable, at the right time, and always correct.</p> <h4 class="heading settled" data-level="5.1.1" id="snapTarget"><span class="secno">5.1.1. </span><span class="content"> Snap Targets</span><a class="self-link" href="#snapTarget"></a></h4> <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="snap-target">snap target</dfn> is an element or pseudo-element which the user-agent has <a href="https://www.w3.org/TR/css-scroll-snap-1/#choosing">chosen</a> to <a data-link-type="dfn" href="https://www.w3.org/TR/css-scroll-snap-1/#scroll-snap" id="ref-for-scroll-snap">snap</a> a given <a data-link-type="dfn" href="https://www.w3.org/TR/css-scroll-snap-1/#scroll-snap-container" id="ref-for-scroll-snap-container">snap container</a> to.</p> <table class="data" id="eventhandlers"> <thead> <tr> <th>Event <th>Interface <th>Targets <th>Description <tbody> <tr> <th><dfn class="dfn-paneled idl-code" data-dfn-for="SnapEvent" data-dfn-type="event" data-export id="eventdef-snapevent-scrollsnapchange"><code>scrollsnapchange</code></dfn> <td><code class="idl"><a data-link-type="idl" href="#snapevent" id="ref-for-snapevent">SnapEvent</a></code> <td>scroll containers <td>Fired at the scrolling element or <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document">Document</a></code> at the end of a scroll (before a <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/cssom-view-1/#eventdef-document-scrollend" id="ref-for-eventdef-document-scrollend">scrollend</a></code> event) or after a <a href="https://www.w3.org/TR/css-scroll-snap-1/#re-snap">layout snap</a> if the <a data-link-type="dfn" href="#snap-target" id="ref-for-snap-target">snap targets</a> that the scrolling element or Document is snapped to changed. <tr> <th><dfn class="dfn-paneled idl-code" data-dfn-for="SnapEvent" data-dfn-type="event" data-export id="eventdef-snapevent-scrollsnapchanging"><code>scrollsnapchanging</code></dfn> <td><code class="idl"><a data-link-type="idl" href="#snapevent" id="ref-for-snapevent①">SnapEvent</a></code> <td>scroll containers <td>Fired at the scrolling element or <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document①">Document</a></code> during scrolling (before a <code class="idl"><a class="idl-code" data-link-type="event" href="https://www.w3.org/TR/cssom-view-1/#eventdef-document-scroll" id="ref-for-eventdef-document-scroll">scroll</a></code> event), if the <a data-link-type="dfn" href="#snap-target" id="ref-for-snap-target①">snap targets</a> that the scrolling would cause the scroller to snap to are different from the <span id="ref-for-snap-target②">snap targets</span> selected at the last scrollsnapchanging event that was fired. </table> <h4 class="heading settled" data-level="5.1.2" id="scrollsnapchange"><span class="secno">5.1.2. </span><span class="content"> <code class="idl"><a data-link-type="idl" href="#eventdef-snapevent-scrollsnapchange" id="ref-for-eventdef-snapevent-scrollsnapchange①">scrollsnapchange</a></code></span><a class="self-link" href="#scrollsnapchange"></a></h4> <p><code class="idl"><a data-link-type="idl" href="#eventdef-snapevent-scrollsnapchange" id="ref-for-eventdef-snapevent-scrollsnapchange②">scrollsnapchange</a></code> indicates that the snap area to which a snap container is snapped along either axis has changed. <code class="idl"><a data-link-type="idl" href="#eventdef-snapevent-scrollsnapchange" id="ref-for-eventdef-snapevent-scrollsnapchange③">scrollsnapchange</a></code> is dispatched:</p> <ol> <li> when a scrolling operation is <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-view-1/#scroll-completed" id="ref-for-scroll-completed">completed</a> if, for either the block or inline axis, the <a data-link-type="dfn" href="#snap-target" id="ref-for-snap-target③">snap target</a> which the snap container is snapped to is different from the <span id="ref-for-snap-target④">snap target</span> it most recently snapped to in that axis. For snap containers with <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-scroll-snap-1/#valdef-scroll-snap-type-proximity" id="ref-for-valdef-scroll-snap-type-proximity">proximity</a> strictness, the scroll may result in the snap container no longer being snapped to any <span id="ref-for-snap-target⑤">snap target</span>. <a href="https://www.w3.org/TR/css-scroll-snap-1/#choosing"><cite>CSS Scroll Snap 1</cite> § 6.2 Choosing Snap Positions</a> describes the method a UA follows when choosing between elements or pseudo-elements which are <a data-link-type="dfn" href="https://www.w3.org/TR/css-scroll-snap-1/#scroll-snap-area" id="ref-for-scroll-snap-area">snap areas</a>. <li> if there is a change to a snap container’s style such that it goes from having a non-<a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-scroll-snap-1/#valdef-scroll-snap-type-none" id="ref-for-valdef-scroll-snap-type-none">none</a> value for <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-scroll-snap-1/#propdef-scroll-snap-type" id="ref-for-propdef-scroll-snap-type">scroll-snap-type</a> to having a <span class="css" id="ref-for-valdef-scroll-snap-type-none①">none</span> value or vice versa. <li> if, after a <a href="https://www.w3.org/TR/css-scroll-snap-1/#re-snap">layout change</a>, the <a data-link-type="dfn" href="#snap-target" id="ref-for-snap-target⑥">snap target</a> to which a snap container is snapped to changes, regardless of whether there is a change in scroll position after the layout change. </ol> <p>Scrolling operations always lead to <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/cssom-view-1/#eventdef-document-scrollend" id="ref-for-eventdef-document-scrollend①">scrollend</a></code> events being fired. If a scrolling operation also results in a <code class="idl"><a data-link-type="idl" href="#eventdef-snapevent-scrollsnapchange" id="ref-for-eventdef-snapevent-scrollsnapchange④">scrollsnapchange</a></code> event being fired, the <code class="idl"><a data-link-type="idl" href="#eventdef-snapevent-scrollsnapchange" id="ref-for-eventdef-snapevent-scrollsnapchange⑤">scrollsnapchange</a></code> event should be fired before the <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/cssom-view-1/#eventdef-document-scrollend" id="ref-for-eventdef-document-scrollend②">scrollend</a></code> event.</p> <p>Each <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document②">Document</a></code> has an associated list of <dfn class="dfn-paneled" data-dfn-for="Document" data-dfn-type="dfn" data-export id="document-pending-scrollsnapchange-event-targets">pending scrollsnapchange event targets</dfn>, initially empty.</p> <p>Each <a data-link-type="dfn" href="https://www.w3.org/TR/css-scroll-snap-1/#scroll-snap-container" id="ref-for-scroll-snap-container①">snap container</a> has one <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="scrollsnapchangetargetblock">scrollsnapchangeTargetBlock</dfn> and one <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="scrollsnapchangetargetinline">scrollsnapchangeTargetInline</dfn> in the block and inline axes respectively, each of which can either be null if the container is not snapped in that axis or the <a data-link-type="dfn" href="#snap-target" id="ref-for-snap-target⑦">snap target</a> to which the container is snapped.</p> <p>When asked to <dfn class="dfn-paneled" data-dfn-for="Document" data-dfn-type="dfn" data-export id="document-update-scrollsnapchange-targets">update scrollsnapchange targets</dfn> for a <a data-link-type="dfn" href="https://www.w3.org/TR/css-scroll-snap-1/#scroll-snap-container" id="ref-for-scroll-snap-container②">snap container</a>, <var>snapcontainer</var>, run these steps:</p> <ol> <li data-md> <p>Let <var>doc</var> be <var>snapcontainer</var>’s associated <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document③">Document</a></code>.</p> <li data-md> <p>Let <var>blockTarget</var> be the <a data-link-type="dfn" href="#scrollsnapchangetargetblock" id="ref-for-scrollsnapchangetargetblock">scrollsnapchangeTargetBlock</a> associated with <var>snapcontainer</var>.</p> <li data-md> <p>Let <var>inlineTarget</var> be the <a data-link-type="dfn" href="#scrollsnapchangetargetinline" id="ref-for-scrollsnapchangetargetinline">scrollsnapchangeTargetInline</a> associated with <var>snapcontainer</var>.</p> <li data-md> <p>Let <var>blockScrollSnapchangingTarget</var> be the <a data-link-type="dfn" href="#scrollsnapchanging-block-axis-target" id="ref-for-scrollsnapchanging-block-axis-target">scrollsnapchanging block-axis target</a> associated with <var>snapcontainer</var>.</p> <li data-md> <p>Let <var>inlineScrollSnapchangingTarget</var> be the <a data-link-type="dfn" href="#scrollsnapchanging-inline-axis-target" id="ref-for-scrollsnapchanging-inline-axis-target">scrollsnapchanging inline-axis target</a> associated with <var>snapcontainer</var>.</p> <li data-md> <p>Let <var>snap targets changed</var> be a boolean flag that is initially false.</p> <li data-md> <p>If <var>blockTarget</var> is not the same <a data-link-type="dfn" href="#snap-target" id="ref-for-snap-target⑧">snap target</a> as <var>blockScrollSnapchangingTarget</var> or</p> <ol> <li data-md> <p>Set the <a data-link-type="dfn" href="#scrollsnapchangetargetblock" id="ref-for-scrollsnapchangetargetblock①">scrollsnapchangeTargetBlock</a> associated with <var>snapcontainer</var> to <var>blockScrollSnapchangingTarget</var>.</p> <li data-md> <p>Set <var>snap targets changed</var> to true.</p> </ol> <li data-md> <p>If <var>inlineTarget</var> is not the same <a data-link-type="dfn" href="#snap-target" id="ref-for-snap-target⑨">snap target</a> as <var>inlineScrollSnapchangingTarget</var>:</p> <ol> <li data-md> <p>Set the <a data-link-type="dfn" href="#scrollsnapchangetargetinline" id="ref-for-scrollsnapchangetargetinline①">scrollsnapchangeTargetInline</a> associated with <var>snapcontainer</var> to <var>inlineScrollSnapchangingTarget</var>.</p> <li data-md> <p>Set <var>snap targets changed</var> to true.</p> </ol> <li data-md> <p>If <var>snap targets changed</var> is true:</p> <ol> <li data-md> <p>If <var>snapcontainer</var> is not already in <var>doc</var>’s <a data-link-type="dfn" href="#document-pending-scrollsnapchange-event-targets" id="ref-for-document-pending-scrollsnapchange-event-targets">pending scrollsnapchange event targets</a>:</p> <ol> <li data-md> <p>Append <var>snapcontainer</var> to <var>doc</var>’s <a data-link-type="dfn" href="#document-pending-scrollsnapchange-event-targets" id="ref-for-document-pending-scrollsnapchange-event-targets①">pending scrollsnapchange event targets</a>.</p> </ol> </ol> </ol> <p class="note" role="note"><span class="marker">Note:</span> When snapping occurs on a scroller (either due to a layout change or a scrolling operation) the <a data-link-type="dfn" href="#scrollsnapchanging-block-axis-target" id="ref-for-scrollsnapchanging-block-axis-target①">scrollsnapchanging block-axis target</a> and <a data-link-type="dfn" href="#scrollsnapchanging-inline-axis-target" id="ref-for-scrollsnapchanging-inline-axis-target①">scrollsnapchanging inline-axis target</a> associated with that scroller are updated and represent the current snap targets of that scroller. This allows the <a data-link-type="dfn" href="#document-update-scrollsnapchange-targets" id="ref-for-document-update-scrollsnapchange-targets">update scrollsnapchange targets</a> algorithm to use these <a data-link-type="dfn" href="#snap-target" id="ref-for-snap-target①⓪">snap targets</a> to determine whether a <code class="idl"><a data-link-type="idl" href="#eventdef-snapevent-scrollsnapchange" id="ref-for-eventdef-snapevent-scrollsnapchange⑥">scrollsnapchange</a></code> event should be fired.</p> <p>When asked to <dfn class="dfn-paneled" data-dfn-for="Document" data-dfn-type="dfn" data-export id="document-dispatch-pending-scrollsnapchange-events">dispatch pending scrollsnapchange events</dfn> for a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document④">Document</a></code>, <var>doc</var>, run these steps:</p> <ol> <li data-md> <p>For each item <var>target</var> in <var>doc</var>’s <a data-link-type="dfn" href="#document-pending-scrollsnapchange-event-targets" id="ref-for-document-pending-scrollsnapchange-event-targets②">pending scrollsnapchange event targets</a>:</p> <ol> <li data-md> <p>Let <var>blockTarget</var> and <var>inlineTarget</var> be null initially.</p> <li data-md> <p>If the <a data-link-type="dfn" href="#scrollsnapchangetargetblock" id="ref-for-scrollsnapchangetargetblock②">scrollsnapchangeTargetBlock</a> associated with <var>target</var> is a pseudo-element, set <var>blockTarget</var> to the owning element of that <span id="ref-for-scrollsnapchangetargetblock③">scrollsnapchangeTargetBlock</span>.</p> <li data-md> <p>Otherwise, set <var>blockTarget</var> to that <a data-link-type="dfn" href="#scrollsnapchangetargetblock" id="ref-for-scrollsnapchangetargetblock④">scrollsnapchangeTargetBlock</a>.</p> <li data-md> <p>If the <a data-link-type="dfn" href="#scrollsnapchangetargetinline" id="ref-for-scrollsnapchangetargetinline②">scrollsnapchangeTargetInline</a> associated with <var>target</var> is a pseudo-element, set <var>inlineTarget</var> to the owning element of that <span id="ref-for-scrollsnapchangetargetinline③">scrollsnapchangeTargetInline</span>.</p> <li data-md> <p>Otherwise, Set <var>inlineTarget</var> to that <a data-link-type="dfn" href="#scrollsnapchangetargetinline" id="ref-for-scrollsnapchangetargetinline④">scrollsnapchangeTargetInline</a>.</p> <li data-md> <p>Fire a <code class="idl"><a data-link-type="idl" href="#snapevent" id="ref-for-snapevent②">SnapEvent</a></code>, <var>snapevent</var>, named <code class="idl"><a data-link-type="idl" href="#eventdef-snapevent-scrollsnapchange" id="ref-for-eventdef-snapevent-scrollsnapchange⑦">scrollsnapchange</a></code> at <var>target</var> and let <var>snapevent</var>’s <code class="idl"><a data-link-type="idl" href="#dom-snapevent-snaptargetblock" id="ref-for-dom-snapevent-snaptargetblock">snapTargetBlock</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-snapevent-snaptargetinline" id="ref-for-dom-snapevent-snaptargetinline">snapTargetInline</a></code> attributes be <var>blockTarget</var> and <var>inlineTarget</var> respectively.</p> </ol> <li data-md> <p>Empty <var>doc</var>’s <a data-link-type="dfn" href="#document-pending-scrollsnapchange-event-targets" id="ref-for-document-pending-scrollsnapchange-event-targets③">pending scrollsnapchange event targets</a>.</p> </ol> <h4 class="heading settled" data-level="5.1.3" id="scrollsnapchanging"><span class="secno">5.1.3. </span><span class="content"> scrollsnapchanging </span><a class="self-link" href="#scrollsnapchanging"></a></h4> <code class="idl"><a data-link-type="idl" href="#eventdef-snapevent-scrollsnapchanging" id="ref-for-eventdef-snapevent-scrollsnapchanging①">scrollsnapchanging</a></code> is dispatched: <ul> <li data-md> <p>during a scrolling operation, if the <a data-link-type="dfn" href="#snap-target" id="ref-for-snap-target①①">snap targets</a> to which a <a data-link-type="dfn" href="https://www.w3.org/TR/css-scroll-snap-1/#scroll-snap-container" id="ref-for-scroll-snap-container③">snap container</a> would <a data-link-type="dfn" href="https://www.w3.org/TR/css-scroll-snap-1/#scroll-snap" id="ref-for-scroll-snap①">snap</a> (in either axis) changes, or</p> <li data-md> <p>if a <a href="https://www.w3.org/TR/css-scroll-snap-1/#re-snap">layout change</a> occurs such that a <code class="idl"><a data-link-type="idl" href="#eventdef-snapevent-scrollsnapchange" id="ref-for-eventdef-snapevent-scrollsnapchange⑧">scrollsnapchange</a></code> event is to be dispatched. In this case, as with the scrolling case, the <code class="idl"><a data-link-type="idl" href="#eventdef-snapevent-scrollsnapchanging" id="ref-for-eventdef-snapevent-scrollsnapchanging②">scrollsnapchanging</a></code> event should be dispatched before the <code class="idl"><a data-link-type="idl" href="#eventdef-snapevent-scrollsnapchange" id="ref-for-eventdef-snapevent-scrollsnapchange⑨">scrollsnapchange</a></code> event.</p> </ul> <p>A scrolling operation might animate towards a particular position (e.g. scrollbar arrow clicks, arrow key presses, "behavior: smooth" programmatic scrolls) or might directly track a user’s input (e.g. touch scrolling, scrollbar dragging). In either case, the user agent <a href="https://www.w3.org/TR/css-scroll-snap-1/#choosing">chooses</a> an <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="eventual-snap-target">eventual snap target</dfn> in each axis to which the scroller will <a data-link-type="dfn" href="https://www.w3.org/TR/css-scroll-snap-1/#scroll-snap" id="ref-for-scroll-snap②">snap</a> after the scrolling operation reaches its intended scroll position.</p> <ul> <li data-md> <p>In the former case, the intended scroll position is the scroll animation’s target scroll offset.</p> <li data-md> <p>In the latter case, the intended scroll position is the current scroll offset as determined by the user’s input.</p> </ul> <p><code class="idl"><a data-link-type="idl" href="#eventdef-snapevent-scrollsnapchanging" id="ref-for-eventdef-snapevent-scrollsnapchanging③">scrollsnapchanging</a></code> aims to let the web page know, as early as possible, that the scrolling operation will result in a change in the <a data-link-type="dfn" href="#snap-target" id="ref-for-snap-target①②">snap target</a> the snap container is snapped to. The user agent should evaluate whether to trigger <code class="idl"><a data-link-type="idl" href="#eventdef-snapevent-scrollsnapchanging" id="ref-for-eventdef-snapevent-scrollsnapchanging④">scrollsnapchanging</a></code> based on the <a data-link-type="dfn" href="#eventual-snap-target" id="ref-for-eventual-snap-target">eventual snap target</a> to which the scroller would <a data-link-type="dfn" href="https://www.w3.org/TR/css-scroll-snap-1/#scroll-snap" id="ref-for-scroll-snap③">snap</a> were the scrolling operation to reach its intended scroll position.</p> <p class="note" role="note"><span class="marker">Note:</span> Since scrollsnapchanging gives the web page hints about future snapping, the snapping hinted at by a scrollsnapchanging event might not materialize since it will be possible for subsequent scrolling input to further alter the snap container’s scroll position and result in a different eventual snap target.</p> <p><code class="idl"><a data-link-type="idl" href="#eventdef-snapevent-scrollsnapchanging" id="ref-for-eventdef-snapevent-scrollsnapchanging⑤">scrollsnapchanging</a></code> events are fired before <code class="idl"><a class="idl-code" data-link-type="event" href="https://www.w3.org/TR/cssom-view-1/#eventdef-document-scroll" id="ref-for-eventdef-document-scroll①">scroll</a></code> events.</p> <p>Each <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document⑤">Document</a></code> has an associated list of <dfn class="dfn-paneled" data-dfn-for="Document" data-dfn-type="dfn" data-export id="document-pending-scrollsnapchanging-event-targets">pending scrollsnapchanging event targets</dfn>, initially empty.</p> <p>Each <a data-link-type="dfn" href="https://www.w3.org/TR/css-scroll-snap-1/#scroll-snap-container" id="ref-for-scroll-snap-container④">snap container</a> has one <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="scrollsnapchanging-block-axis-target">scrollsnapchanging block-axis target</dfn> and one <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="scrollsnapchanging-inline-axis-target">scrollsnapchanging inline-axis target</dfn> in the block and inline axes respectively, each of which can either be null if the container is not snapping in that axis or the <a data-link-type="dfn" href="#snap-target" id="ref-for-snap-target①③">snap target</a> to which the container is snapping.</p> <p>When asked to <dfn class="dfn-paneled" data-dfn-for="Document" data-dfn-type="dfn" data-export id="document-update-scrollsnapchanging-targets">update scrollsnapchanging targets</dfn> for a <a data-link-type="dfn" href="https://www.w3.org/TR/css-scroll-snap-1/#scroll-snap-container" id="ref-for-scroll-snap-container⑤">snap container</a>, <var>snapcontainer</var>, given an <a data-link-type="dfn" href="#snap-target" id="ref-for-snap-target①④">snap target</a> newBlockTarget and an <span id="ref-for-snap-target①⑤">snap target</span> newInlineTarget, run these steps:</p> <ol> <li data-md> <p>Let <var>doc</var> be <var>snapcontainer</var>’s associated <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document⑥">Document</a></code>.</p> <li data-md> <p>Let <var>blockTarget</var> be the <a data-link-type="dfn" href="#scrollsnapchanging-block-axis-target" id="ref-for-scrollsnapchanging-block-axis-target②">scrollsnapchanging block-axis target</a> that is associated with <var>snapcontainer</var>.</p> <li data-md> <p>Let <var>inlineTarget</var> be the <a data-link-type="dfn" href="#scrollsnapchanging-inline-axis-target" id="ref-for-scrollsnapchanging-inline-axis-target②">scrollsnapchanging inline-axis target</a> that is associated with <var>snapcontainer</var>.</p> <li data-md> <p>If <var>newBlockTarget</var> is not the same <a data-link-type="dfn" href="#snap-target" id="ref-for-snap-target①⑥">snap target</a> as <var>blockTarget</var>:</p> <ol> <li data-md> <p>Set the <a data-link-type="dfn" href="#scrollsnapchanging-block-axis-target" id="ref-for-scrollsnapchanging-block-axis-target③">scrollsnapchanging block-axis target</a> associated with <var>snapcontainer</var> to <var>newBlockTarget</var>.</p> <li data-md> <p>If <var>snapcontainer</var> is not already in <var>doc</var>’s <a data-link-type="dfn" href="#document-pending-scrollsnapchanging-event-targets" id="ref-for-document-pending-scrollsnapchanging-event-targets">pending scrollsnapchanging event targets</a>,</p> <ol> <li data-md> <p>Append <var>snapcontainer</var> to <var>doc</var>’s <a data-link-type="dfn" href="#document-pending-scrollsnapchanging-event-targets" id="ref-for-document-pending-scrollsnapchanging-event-targets①">pending scrollsnapchanging event targets</a></p> </ol> </ol> <li data-md> <p>If <var>newInlineTarget</var> is not the same <a data-link-type="dfn" href="#snap-target" id="ref-for-snap-target①⑦">snap target</a> as <var>inlineTarget</var>:</p> <ol> <li data-md> <p>Set the <a data-link-type="dfn" href="#scrollsnapchanging-inline-axis-target" id="ref-for-scrollsnapchanging-inline-axis-target③">scrollsnapchanging inline-axis target</a> associated with <var>snapcontainer</var> to <var>newInlineTarget</var>.</p> <li data-md> <p>If <var>snapcontainer</var> is not already in <var>doc</var>’s <a data-link-type="dfn" href="#document-pending-scrollsnapchanging-event-targets" id="ref-for-document-pending-scrollsnapchanging-event-targets②">pending scrollsnapchanging event targets</a>,</p> <ol> <li data-md> <p>Append <var>snapcontainer</var> to <var>doc</var>’s <a data-link-type="dfn" href="#document-pending-scrollsnapchanging-event-targets" id="ref-for-document-pending-scrollsnapchanging-event-targets③">pending scrollsnapchanging event targets</a>.</p> </ol> </ol> </ol> <p>When asked to <dfn class="dfn-paneled" data-dfn-for="Document" data-dfn-type="dfn" data-export id="document-dispatch-pending-scrollsnapchanging-events">dispatch pending scrollsnapchanging events</dfn> for a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document⑦">Document</a></code>, <var>doc</var>, run these steps:</p> <ol> <li data-md> <p>For each item <var>target</var> in <var>doc</var>’s <a data-link-type="dfn" href="#document-pending-scrollsnapchanging-event-targets" id="ref-for-document-pending-scrollsnapchanging-event-targets④">pending scrollsnapchanging event targets</a>:</p> <ol> <li data-md> <p>Let <var>blockTarget</var> and <var>inlineTarget</var> be null initially.</p> <li data-md> <p>If the <a data-link-type="dfn" href="#scrollsnapchanging-block-axis-target" id="ref-for-scrollsnapchanging-block-axis-target④">scrollsnapchanging block-axis target</a> associated with <var>target</var> is a pseudo-element, set <var>blockTarget</var> to the owning element of that <span id="ref-for-scrollsnapchanging-block-axis-target⑤">scrollsnapchanging block-axis target</span>.</p> <li data-md> <p>Otherwise, set <var>blockTarget</var> to that <a data-link-type="dfn" href="#scrollsnapchanging-block-axis-target" id="ref-for-scrollsnapchanging-block-axis-target⑥">scrollsnapchanging block-axis target</a>.</p> <li data-md> <p>If the <a data-link-type="dfn" href="#scrollsnapchanging-inline-axis-target" id="ref-for-scrollsnapchanging-inline-axis-target④">scrollsnapchanging inline-axis target</a> associated with <var>target</var> is a pseudo-element, set <var>inlineTarget</var> to the owning element of that <span id="ref-for-scrollsnapchanging-inline-axis-target⑤">scrollsnapchanging inline-axis target</span>.</p> <li data-md> <p>Otherwise, set <var>inlineTarget</var> to that <a data-link-type="dfn" href="#scrollsnapchanging-inline-axis-target" id="ref-for-scrollsnapchanging-inline-axis-target⑥">scrollsnapchanging inline-axis target</a>.</p> <li data-md> <p>Fire a <code class="idl"><a data-link-type="idl" href="#snapevent" id="ref-for-snapevent③">SnapEvent</a></code>, <var>snapevent</var>, named <code class="idl"><a data-link-type="idl" href="#eventdef-snapevent-scrollsnapchanging" id="ref-for-eventdef-snapevent-scrollsnapchanging⑥">scrollsnapchanging</a></code> at <var>target</var> and let <var>snapevent</var>’s <code class="idl"><a data-link-type="idl" href="#dom-snapevent-snaptargetblock" id="ref-for-dom-snapevent-snaptargetblock①">snapTargetBlock</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-snapevent-snaptargetinline" id="ref-for-dom-snapevent-snaptargetinline①">snapTargetInline</a></code> attributes be <var>blockTarget</var> and <var>inlineTarget</var>, respectively.</p> </ol> <li data-md> <p>Empty <var>doc</var>’s <a data-link-type="dfn" href="#document-pending-scrollsnapchanging-event-targets" id="ref-for-document-pending-scrollsnapchanging-event-targets⑤">pending scrollsnapchanging event targets</a>.</p> </ol> <h4 class="heading settled" data-level="5.1.4" id="snap-events-on-layout-changes"><span class="secno">5.1.4. </span><span class="content">Snap Events due to Layout Changes </span><a class="self-link" href="#snap-events-on-layout-changes"></a></h4> When a <a data-link-type="dfn" href="https://www.w3.org/TR/css-scroll-snap-1/#scroll-snap-container" id="ref-for-scroll-snap-container⑥">snap container</a>, <var>snapcontainer</var>, <a href="https://www.w3.org/TR/css-scroll-snap-1/#re-snap">re-snaps</a>, run these steps: <ol> <li data-md> <p>Let <var>newBlockTarget</var> be the <a data-link-type="dfn" href="#snap-target" id="ref-for-snap-target①⑧">snap target</a> that <var>snapcontainer</var> has <a data-link-type="dfn" href="https://www.w3.org/TR/css-scroll-snap-1/#scroll-snap" id="ref-for-scroll-snap④">snapped</a> to in the block axis or null if it did not snap to any element.</p> <li data-md> <p>Let <var>newInlineTarget</var> be the <a data-link-type="dfn" href="#snap-target" id="ref-for-snap-target①⑨">snap target</a> that <var>snapcontainer</var> has <a data-link-type="dfn" href="https://www.w3.org/TR/css-scroll-snap-1/#scroll-snap" id="ref-for-scroll-snap⑤">snapped</a> to in the inline axis or null if it did not snap to any element or pseudo-element.</p> <li data-md> <p>Run the steps to <a data-link-type="dfn" href="#document-update-scrollsnapchanging-targets" id="ref-for-document-update-scrollsnapchanging-targets">update scrollsnapchanging targets</a> with <var>newBlockTarget</var> as newBlockTarget and <var>newInlineTarget</var> as newInlineTarget.</p> <li data-md> <p>Run the steps to <a data-link-type="dfn" href="#document-update-scrollsnapchange-targets" id="ref-for-document-update-scrollsnapchange-targets①">update scrollsnapchange targets</a> for <var>snapcontainer</var>.</p> </ol> <h3 class="heading settled" data-level="5.2" id="snapevent-interface"><span class="secno">5.2. </span><span class="content">SnapEvent interface</span><a class="self-link" href="#snapevent-interface"></a></h3> <pre class="idl highlight def"><c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-snapeventinit"><code><c- g>SnapEventInit</c-></code></dfn> : <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#dictdef-eventinit" id="ref-for-dictdef-eventinit"><c- n>EventInit</c-></a> { <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#node" id="ref-for-node"><c- n>Node</c-></a>? <dfn class="dfn-paneled idl-code" data-dfn-for="SnapEventInit" data-dfn-type="dict-member" data-export data-type="Node?" id="dom-snapeventinit-snaptargetblock"><code><c- g>snapTargetBlock</c-></code></dfn>; <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#node" id="ref-for-node①"><c- n>Node</c-></a>? <dfn class="dfn-paneled idl-code" data-dfn-for="SnapEventInit" data-dfn-type="dict-member" data-export data-type="Node?" id="dom-snapeventinit-snaptargetinline"><code><c- g>snapTargetInline</c-></code></dfn>; }; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Exposed" id="ref-for-Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->] <c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="snapevent"><code><c- g>SnapEvent</c-></code></dfn> : <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#event" id="ref-for-event"><c- n>Event</c-></a> { <dfn class="dfn-paneled idl-code" data-dfn-for="SnapEvent" data-dfn-type="constructor" data-export data-lt="SnapEvent(type, eventInitDict)|constructor(type, eventInitDict)|SnapEvent(type)|constructor(type)" id="dom-snapevent-snapevent"><code><c- g>constructor</c-></code></dfn>(<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString" id="ref-for-idl-DOMString"><c- b>DOMString</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="SnapEvent/SnapEvent(type, eventInitDict), SnapEvent/constructor(type, eventInitDict), SnapEvent/SnapEvent(type), SnapEvent/constructor(type)" data-dfn-type="argument" data-export id="dom-snapevent-snapevent-type-eventinitdict-type"><code><c- g>type</c-></code></dfn>, <c- b>optional</c-> <a data-link-type="idl-name" href="#dictdef-snapeventinit" id="ref-for-dictdef-snapeventinit"><c- n>SnapEventInit</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="SnapEvent/SnapEvent(type, eventInitDict), SnapEvent/constructor(type, eventInitDict), SnapEvent/SnapEvent(type), SnapEvent/constructor(type)" data-dfn-type="argument" data-export id="dom-snapevent-snapevent-type-eventinitdict-eventinitdict"><code><c- g>eventInitDict</c-></code></dfn> = {}); <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#node" id="ref-for-node②"><c- n>Node</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="Node?" href="#dom-snapevent-snaptargetblock" id="ref-for-dom-snapevent-snaptargetblock②"><c- g>snapTargetBlock</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#node" id="ref-for-node③"><c- n>Node</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="Node?" href="#dom-snapevent-snaptargetinline" id="ref-for-dom-snapevent-snaptargetinline②"><c- g>snapTargetInline</c-></a>; }; </pre> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="SnapEvent" data-dfn-type="attribute" data-export id="dom-snapevent-snaptargetblock"><code>snapTargetBlock</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#node" id="ref-for-node④">Node</a>, readonly, nullable</span> <dd data-md> <p>The element that the snap container is snapped to in the block axis at the <a data-link-type="dfn" href="https://www.w3.org/TR/css-scroll-snap-1/#scroll-snap-position" id="ref-for-scroll-snap-position">snap position</a> for the associated snap event. If the <a data-link-type="dfn" href="#snap-target" id="ref-for-snap-target②⓪">snap target</a> corresponding to this was a pseudo-element, this will be the owning element of that pseudo-element.</p> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="SnapEvent" data-dfn-type="attribute" data-export id="dom-snapevent-snaptargetinline"><code>snapTargetInline</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#node" id="ref-for-node⑤">Node</a>, readonly, nullable</span> <dd data-md> <p>The element that the snap container is snapped to in the inline axis at the <a data-link-type="dfn" href="https://www.w3.org/TR/css-scroll-snap-1/#scroll-snap-position" id="ref-for-scroll-snap-position①">snap position</a> for the associated snap event. If the <a data-link-type="dfn" href="#snap-target" id="ref-for-snap-target②①">snap target</a> corresponding to this was a pseudo-element, this will be the owning element of that pseudo-element.</p> </dl> <p>For <code class="idl"><a data-link-type="idl" href="#eventdef-snapevent-scrollsnapchange" id="ref-for-eventdef-snapevent-scrollsnapchange①⓪">scrollsnapchange</a></code> events, the snap position is the position already realized by the snap container after a scroll snap. For <code class="idl"><a data-link-type="idl" href="#eventdef-snapevent-scrollsnapchanging" id="ref-for-eventdef-snapevent-scrollsnapchanging⑦">scrollsnapchanging</a></code> events it is the snap position that the snap container will eventually snap to when the scrolling operation ends.</p> <p><code class="idl"><a data-link-type="idl" href="#snapevent" id="ref-for-snapevent④">SnapEvent</a></code>s do not bubble except when the event target is the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document⑧">Document</a></code>. <code class="idl"><a data-link-type="idl" href="#snapevent" id="ref-for-snapevent⑤">SnapEvent</a></code>s are not cancellable.</p> <h2 class="heading settled" id="event-handlers"><span class="content">Appendix A: Event Handlers</span><a class="self-link" href="#event-handlers"></a></h2> <p class="issue" id="issue-14ba3679"><a class="self-link" href="#issue-14ba3679"></a> This section should be moved to the HTML event handler <a href="https://html.spec.whatwg.org/#event-handlers-on-elements,-document-objects,-and-window-objects">specification</a>.</p> <h3 class="heading settled" id="event-handlers-on-elements-document-and-window-objects"><span class="content">Event handlers on elements, Document objects and Window objects</span><a class="self-link" href="#event-handlers-on-elements-document-and-window-objects"></a></h3> <p>The following are additional <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-handlers" id="ref-for-event-handlers">event handlers</a> (and their corresponding <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-event-type" id="ref-for-event-handler-event-type">event handler event types</a>) that must be supported by all <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#html-elements" id="ref-for-html-elements">HTML elements</a> as both <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-content-attributes" id="ref-for-event-handler-content-attributes">event handler content attributes</a> and <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-idl-attributes" id="ref-for-event-handler-idl-attributes">event handler IDL attributes</a>; and that must be supported by all <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#window" id="ref-for-window">Window</a></code> objects and <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document⑨">Document</a></code> objects, as <span id="ref-for-event-handler-idl-attributes①">event handler IDL attributes</span>:</p> <table class="data"> <tbody> <tr> <th><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-handlers" id="ref-for-event-handlers①">Event handler</a> <th><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-event-type" id="ref-for-event-handler-event-type①">Event handler event type</a> <tr> <td><dfn class="dfn-paneled idl-code" data-dfn-for="Document,Element,Window" data-dfn-type="attribute" data-export id="dom-document-onscrollsnapchange"><code>onscrollsnapchange</code></dfn> <td><code class="idl"><a data-link-type="idl" href="#eventdef-snapevent-scrollsnapchange" id="ref-for-eventdef-snapevent-scrollsnapchange①①">scrollsnapchange</a></code> <tr> <td><dfn class="dfn-paneled idl-code" data-dfn-for="Document,Element,Window" data-dfn-type="attribute" data-export id="dom-document-onscrollsnapchanging"><code>onscrollsnapchanging</code></dfn> <td><code class="idl"><a data-link-type="idl" href="#eventdef-snapevent-scrollsnapchanging" id="ref-for-eventdef-snapevent-scrollsnapchanging⑧">scrollsnapchanging</a></code> </table> <h3 class="heading settled" id="interface-globaleventhandlers"><span class="content">Extensions to the <code>GlobalEventHandlers</code> Interface Mixin</span><a class="self-link" href="#interface-globaleventhandlers"></a></h3> <p>This specification extends the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/webappapis.html#globaleventhandlers" id="ref-for-globaleventhandlers">GlobalEventHandlers</a></code> interface mixin from HTML to add <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-idl-attributes" id="ref-for-event-handler-idl-attributes②">event handler IDL attributes</a> for <code class="idl"><a data-link-type="idl" href="#snapevent" id="ref-for-snapevent⑥">SnapEvent</a></code>s as defined in <a href="#event-handlers-on-elements-document-and-window-objects">Event handlers on elements, Document objects and Window objects</a>.</p> <h4 class="heading settled" id="interface-globaleventhandlers-idl"><span class="content">IDL Definition</span><a class="self-link" href="#interface-globaleventhandlers-idl"></a></h4> <pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <c- b>mixin</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/webappapis.html#globaleventhandlers" id="ref-for-globaleventhandlers①"><c- g>GlobalEventHandlers</c-></a> { <c- b>attribute</c-> <a data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler"><c- n>EventHandler</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="GlobalEventHandlers" data-dfn-type="attribute" data-export data-type="EventHandler" id="dom-globaleventhandlers-onsnapchanged"><code><c- g>onsnapchanged</c-></code></dfn>; <c- b>attribute</c-> <a data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler①"><c- n>EventHandler</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="GlobalEventHandlers" data-dfn-type="attribute" data-export data-type="EventHandler" id="dom-globaleventhandlers-onsnapchanging"><code><c- g>onsnapchanging</c-></code></dfn>; }; </pre> <h2 class="heading settled" data-level="6" id="privacy"><span class="secno">6. </span><span class="content">Privacy Considerations</span><a class="self-link" href="#privacy"></a></h2> <p>The features in this spec have no known privacy implications.</p> <h2 class="heading settled" data-level="7" id="security"><span class="secno">7. </span><span class="content">Security Considerations</span><a class="self-link" href="#security"></a></h2> <p>The features in this spec have no known security implications.</p> </main> <h2 class="no-ref no-num heading settled" id="w3c-conformance"><span class="content"> Conformance</span><a class="self-link" href="#w3c-conformance"></a></h2> <h3 class="no-ref heading settled" id="w3c-conventions"><span class="content"> Document conventions</span><a class="self-link" href="#w3c-conventions"></a></h3> <p>Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification. </p> <p>All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119" title="Key words for use in RFCs to Indicate Requirement Levels">[RFC2119]</a></p> <p>Examples in this specification are introduced with the words “for example” or are set apart from the normative text with <code>class="example"</code>, like this: </p> <div class="example" id="w3c-example"> <a class="self-link" href="#w3c-example"></a> <p>This is an example of an informative example.</p> </div> <p>Informative notes begin with the word “Note” and are set apart from the normative text with <code>class="note"</code>, like this: </p> <p class="note" role="note">Note, this is an informative note.</p> <p>Advisements are normative sections styled to evoke special attention and are set apart from other normative text with <code><strong class="advisement"></code>, like this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong></p> <h3 class="no-ref heading settled" id="w3c-conformance-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#w3c-conformance-classes"></a></h3> <p>Conformance to this specification is defined for three conformance classes: </p> <dl> <dt>style sheet <dd>A <a href="https://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS style sheet</a>. <dt>renderer <dd>A <a href="https://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders documents that use them. <dt>authoring tool <dd>A <a href="https://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that writes a style sheet. </dl> <p>A style sheet is conformant to this specification if all of its statements that use syntax defined in this module are valid according to the generic CSS grammar and the individual grammars of each feature defined in this module. </p> <p>A renderer is conformant to this specification if, in addition to interpreting the style sheet as defined by the appropriate specifications, it supports all the features defined by this specification by parsing them correctly and rendering the document accordingly. However, the inability of a UA to correctly render a document due to limitations of the device does not make the UA non-conformant. (For example, a UA is not required to render color on a monochrome monitor.) </p> <p>An authoring tool is conformant to this specification if it writes style sheets that are syntactically correct according to the generic CSS grammar and the individual grammars of each feature in this module, and meet all other conformance requirements of style sheets as described in this module. </p> <h3 class="no-ref heading settled" id="w3c-partial"><span class="content"> Partial implementations</span><a class="self-link" href="#w3c-partial"></a></h3> <p>So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers <strong>must</strong> treat as invalid (and <a href="https://www.w3.org/TR/CSS21/conform.html#ignore">ignore as appropriate</a>) any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support. In particular, user agents <strong>must not</strong> selectively ignore unsupported component values and honor supported values in a single multi-value property declaration: if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored.</p> <h4 class="heading settled" id="w3c-conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#w3c-conform-future-proofing"></a></h4> <p>To avoid clashes with future stable CSS features, the CSSWG recommends <a href="https://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="https://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="https://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p> <h3 class="no-ref heading settled" id="w3c-testing"><span class="content"> Non-experimental implementations</span><a class="self-link" href="#w3c-testing"></a></h3> <p>Once a specification reaches the Candidate Recommendation stage, non-experimental implementations are possible, and implementors should release an unprefixed implementation of any CR-level feature they can demonstrate to be correctly implemented according to spec. </p> <p>To establish and maintain the interoperability of CSS across implementations, the CSS Working Group requests that non-experimental CSS renderers submit an implementation report (and, if necessary, the testcases used for that implementation report) to the W3C before releasing an unprefixed implementation of any CSS features. Testcases submitted to W3C are subject to review and correction by the CSS Working Group. </p> <p>Further information on submitting testcases and implementation reports can be found from on the CSS Working Group’s website at <a href="https://www.w3.org/Style/CSS/Test/">https://www.w3.org/Style/CSS/Test/</a>. Questions should be directed to the <a href="https://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list.</p> <script src="https://www.w3.org/scripts/TR/2021/fixup.js"></script> <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2> <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3> <ul class="index"> <li><a href="#dom-snapevent-snapevent">constructor(type)</a><span>, in § 5.2</span> <li><a href="#dom-snapevent-snapevent">constructor(type, eventInitDict)</a><span>, in § 5.2</span> <li><a href="#document-dispatch-pending-scrollsnapchange-events">dispatch pending scrollsnapchange events</a><span>, in § 5.1.2</span> <li><a href="#document-dispatch-pending-scrollsnapchanging-events">dispatch pending scrollsnapchanging events</a><span>, in § 5.1.3</span> <li><a href="#eventual-snap-target">eventual snap target</a><span>, in § 5.1.3</span> <li><a href="#initial-scroll-target">Initial scroll target</a><span>, in § 3.1</span> <li><a href="#valdef-scroll-initial-target-nearest">nearest</a><span>, in § 3.1.2</span> <li><a href="#valdef-scroll-initial-target-none">none</a><span>, in § 3.1.2</span> <li><a href="#dom-document-onscrollsnapchange">onscrollsnapchange</a><span>, in § Unnumbered section</span> <li><a href="#dom-document-onscrollsnapchanging">onscrollsnapchanging</a><span>, in § Unnumbered section</span> <li><a href="#dom-globaleventhandlers-onsnapchanged">onsnapchanged</a><span>, in § Unnumbered section</span> <li><a href="#dom-globaleventhandlers-onsnapchanging">onsnapchanging</a><span>, in § Unnumbered section</span> <li><a href="#document-pending-scrollsnapchange-event-targets">pending scrollsnapchange event targets</a><span>, in § 5.1.2</span> <li><a href="#document-pending-scrollsnapchanging-event-targets">pending scrollsnapchanging event targets</a><span>, in § 5.1.3</span> <li><a href="#propdef-scroll-initial-target">scroll-initial-target</a><span>, in § 3.1.2</span> <li><a href="#eventdef-snapevent-scrollsnapchange">scrollsnapchange</a><span>, in § 5.1.1</span> <li><a href="#scrollsnapchangetargetblock">scrollsnapchangeTargetBlock</a><span>, in § 5.1.2</span> <li><a href="#scrollsnapchangetargetinline">scrollsnapchangeTargetInline</a><span>, in § 5.1.2</span> <li><a href="#eventdef-snapevent-scrollsnapchanging">scrollsnapchanging</a><span>, in § 5.1.1</span> <li><a href="#scrollsnapchanging-block-axis-target">scrollsnapchanging block-axis target</a><span>, in § 5.1.3</span> <li><a href="#scrollsnapchanging-inline-axis-target">scrollsnapchanging inline-axis target</a><span>, in § 5.1.3</span> <li><a href="#snapevent">SnapEvent</a><span>, in § 5.2</span> <li><a href="#dictdef-snapeventinit">SnapEventInit</a><span>, in § 5.2</span> <li><a href="#dom-snapevent-snapevent">SnapEvent(type)</a><span>, in § 5.2</span> <li><a href="#dom-snapevent-snapevent">SnapEvent(type, eventInitDict)</a><span>, in § 5.2</span> <li><a href="#selectordef-snapped">:snapped</a><span>, in § 4.1</span> <li><a href="#selectordef-snapped-block">:snapped-block</a><span>, in § 4.1</span> <li><a href="#selectordef-snapped-inline">:snapped-inline</a><span>, in § 4.1</span> <li><a href="#selectordef-snapped-x">:snapped-x</a><span>, in § 4.1</span> <li><a href="#selectordef-snapped-y">:snapped-y</a><span>, in § 4.1</span> <li><a href="#snap-target">snap target</a><span>, in § 5.1.1</span> <li> snapTargetBlock <ul> <li><a href="#dom-snapevent-snaptargetblock">attribute for SnapEvent</a><span>, in § 5.2</span> <li><a href="#dom-snapeventinit-snaptargetblock">dict-member for SnapEventInit</a><span>, in § 5.2</span> </ul> <li> snapTargetInline <ul> <li><a href="#dom-snapevent-snaptargetinline">attribute for SnapEvent</a><span>, in § 5.2</span> <li><a href="#dom-snapeventinit-snaptargetinline">dict-member for SnapEventInit</a><span>, in § 5.2</span> </ul> <li><a href="#document-update-scrollsnapchange-targets">update scrollsnapchange targets</a><span>, in § 5.1.2</span> <li><a href="#document-update-scrollsnapchanging-targets">update scrollsnapchanging targets</a><span>, in § 5.1.3</span> </ul> <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3> <ul class="index"> <li> <a data-link-type="biblio">[CSS-ALIGN-3]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="c4db3a90">content-distribution properties</span> <li><span class="dfn-paneled" id="0ef4bcd3">place-content</span> </ul> <li> <a data-link-type="biblio">[CSS-OVERFLOW-3]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="a3972067">initial scroll position</span> <li><span class="dfn-paneled" id="a3cabdb1">scroll container</span> </ul> <li> <a data-link-type="biblio">[CSS-SCROLL-SNAP-1]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="f1e0a109">none</span> <li><span class="dfn-paneled" id="9b37b029">proximity</span> <li><span class="dfn-paneled" id="f6ae3416">scroll snap</span> <li><span class="dfn-paneled" id="3705bb2d">scroll snap area</span> <li><span class="dfn-paneled" id="552105cb">scroll snap container</span> <li><span class="dfn-paneled" id="a2df9ed1">scroll snap position</span> <li><span class="dfn-paneled" id="b8bb50c6">scroll-snap-type</span> </ul> <li> <a data-link-type="biblio">[CSS-VALUES-4]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="4eb9d37e">|</span> </ul> <li> <a data-link-type="biblio">[CSS21]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="9e73f31a">block</span> <li><span class="dfn-paneled" id="6e44a0d3">inline</span> </ul> <li> <a data-link-type="biblio">[CSSOM-VIEW-1]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="0cda95c2">determine the scroll-into-view position</span> <li><span class="dfn-paneled" id="7f14f658">scroll</span> <li><span class="dfn-paneled" id="ca9e4783">scroll completed</span> <li><span class="dfn-paneled" id="72258dd1">scrollend</span> </ul> <li> <a data-link-type="biblio">[DOM]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="85394472">Document</span> <li><span class="dfn-paneled" id="129bdae8">Event</span> <li><span class="dfn-paneled" id="44a7708c">EventInit</span> <li><span class="dfn-paneled" id="96c16e60">Node</span> <li><span class="dfn-paneled" id="25538777">tree order</span> </ul> <li> <a data-link-type="biblio">[HTML]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="f0951476">EventHandler</span> <li><span class="dfn-paneled" id="762ce945">GlobalEventHandlers</span> <li><span class="dfn-paneled" id="5d7209e9">Window</span> <li><span class="dfn-paneled" id="6a5a59a0">event handler</span> <li><span class="dfn-paneled" id="cc6d9aed">event handler content attribute</span> <li><span class="dfn-paneled" id="9d386f55">event handler event type</span> <li><span class="dfn-paneled" id="03675365">event handler IDL attribute</span> <li><span class="dfn-paneled" id="49a64d88">HTML elements</span> </ul> <li> <a data-link-type="biblio">[WEBIDL]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="8855a9aa">DOMString</span> <li><span class="dfn-paneled" id="889e932f">Exposed</span> </ul> </ul> <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2> <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3> <dl> <dt id="biblio-css-align-3">[CSS-ALIGN-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-align-3/"><cite>CSS Box Alignment Module Level 3</cite></a>. 17 February 2023. WD. URL: <a href="https://www.w3.org/TR/css-align-3/">https://www.w3.org/TR/css-align-3/</a> <dt id="biblio-css-overflow-3">[CSS-OVERFLOW-3] <dd>Elika Etemad; Florian Rivoal. <a href="https://www.w3.org/TR/css-overflow-3/"><cite>CSS Overflow Module Level 3</cite></a>. 29 March 2023. WD. URL: <a href="https://www.w3.org/TR/css-overflow-3/">https://www.w3.org/TR/css-overflow-3/</a> <dt id="biblio-css-scroll-snap-1">[CSS-SCROLL-SNAP-1] <dd>Matt Rakow; et al. <a href="https://www.w3.org/TR/css-scroll-snap-1/"><cite>CSS Scroll Snap Module Level 1</cite></a>. 11 March 2021. CR. URL: <a href="https://www.w3.org/TR/css-scroll-snap-1/">https://www.w3.org/TR/css-scroll-snap-1/</a> <dt id="biblio-css-values-4">[CSS-VALUES-4] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/"><cite>CSS Values and Units Module Level 4</cite></a>. 12 March 2024. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a> <dt id="biblio-css21">[CSS21] <dd>Bert Bos; et al. <a href="https://www.w3.org/TR/CSS21/"><cite>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</cite></a>. 7 June 2011. REC. URL: <a href="https://www.w3.org/TR/CSS21/">https://www.w3.org/TR/CSS21/</a> <dt id="biblio-cssom-view-1">[CSSOM-VIEW-1] <dd>Simon Pieters. <a href="https://www.w3.org/TR/cssom-view-1/"><cite>CSSOM View Module</cite></a>. 17 March 2016. WD. URL: <a href="https://www.w3.org/TR/cssom-view-1/">https://www.w3.org/TR/cssom-view-1/</a> <dt id="biblio-dom">[DOM] <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/"><cite>DOM Standard</cite></a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a> <dt id="biblio-html">[HTML] <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/"><cite>HTML Standard</cite></a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a> <dt id="biblio-rfc2119">[RFC2119] <dd>S. Bradner. <a href="https://datatracker.ietf.org/doc/html/rfc2119"><cite>Key words for use in RFCs to Indicate Requirement Levels</cite></a>. March 1997. Best Current Practice. URL: <a href="https://datatracker.ietf.org/doc/html/rfc2119">https://datatracker.ietf.org/doc/html/rfc2119</a> <dt id="biblio-webidl">[WEBIDL] <dd>Edgar Chen; Timothy Gu. <a href="https://webidl.spec.whatwg.org/"><cite>Web IDL Standard</cite></a>. Living Standard. URL: <a href="https://webidl.spec.whatwg.org/">https://webidl.spec.whatwg.org/</a> </dl> <h2 class="no-num no-ref heading settled" id="property-index"><span class="content">Property Index</span><a class="self-link" href="#property-index"></a></h2> <div class="big-element-wrapper"> <table class="index"> <thead> <tr> <th scope="col">Name <th scope="col">Value <th scope="col">Initial <th scope="col">Applies to <th scope="col">Inh. <th scope="col">%ages <th scope="col">Animation type <th scope="col">Canonical order <th scope="col">Computed value <tbody> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-scroll-initial-target" id="ref-for-propdef-scroll-initial-target④">scroll-initial-target</a> <td>none | nearest <td>none <td>all elements <td>no <td>N/A <td>none <td>per grammar <td>see individual properties </table> </div> <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2> <pre class="idl highlight def"><c- b>dictionary</c-> <a href="#dictdef-snapeventinit"><code><c- g>SnapEventInit</c-></code></a> : <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#dictdef-eventinit"><c- n>EventInit</c-></a> { <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#node"><c- n>Node</c-></a>? <a data-type="Node?" href="#dom-snapeventinit-snaptargetblock"><code><c- g>snapTargetBlock</c-></code></a>; <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#node"><c- n>Node</c-></a>? <a data-type="Node?" href="#dom-snapeventinit-snaptargetinline"><code><c- g>snapTargetInline</c-></code></a>; }; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->] <c- b>interface</c-> <a href="#snapevent"><code><c- g>SnapEvent</c-></code></a> : <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#event"><c- n>Event</c-></a> { <a href="#dom-snapevent-snapevent"><code><c- g>constructor</c-></code></a>(<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString"><c- b>DOMString</c-></a> <a href="#dom-snapevent-snapevent-type-eventinitdict-type"><code><c- g>type</c-></code></a>, <c- b>optional</c-> <a data-link-type="idl-name" href="#dictdef-snapeventinit"><c- n>SnapEventInit</c-></a> <a href="#dom-snapevent-snapevent-type-eventinitdict-eventinitdict"><code><c- g>eventInitDict</c-></code></a> = {}); <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#node"><c- n>Node</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="Node?" href="#dom-snapevent-snaptargetblock"><c- g>snapTargetBlock</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#node"><c- n>Node</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="Node?" href="#dom-snapevent-snaptargetinline"><c- g>snapTargetInline</c-></a>; }; <c- b>partial</c-> <c- b>interface</c-> <c- b>mixin</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/webappapis.html#globaleventhandlers"><c- g>GlobalEventHandlers</c-></a> { <c- b>attribute</c-> <a data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler"><c- n>EventHandler</c-></a> <a data-type="EventHandler" href="#dom-globaleventhandlers-onsnapchanged"><code><c- g>onsnapchanged</c-></code></a>; <c- b>attribute</c-> <a data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler"><c- n>EventHandler</c-></a> <a data-type="EventHandler" href="#dom-globaleventhandlers-onsnapchanging"><code><c- g>onsnapchanging</c-></code></a>; }; </pre> <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2> <div style="counter-reset:issue"> <div class="issue"> The name "scroll-initial-target" is chosen as the least worst option which expresses that it should be scrolled to when its scroll container first shows up on the page. A better name for the property would be very much welcome. <a href="https://github.com/w3c/csswg-drafts/issues/11173">[Issue #11173]</a> <a class="issue-return" href="#issue-cd47e978" title="Jump to section">↵</a></div> <div class="issue"> The ':snapped' pseudo-class is being dropped in favor of a <a href="https://drafts.csswg.org/css-contain-4/scroll_state_explainer.html">container state query</a> approach. <a class="issue-return" href="#issue-1a2ac20b" title="Jump to section">↵</a></div> <div class="issue"> This section should be moved to the HTML event handler <a href="https://html.spec.whatwg.org/#event-handlers-on-elements,-document-objects,-and-window-objects">specification</a>. <a class="issue-return" href="#issue-14ba3679" title="Jump to section">↵</a></div> </div> <script>/* Boilerplate: script-dom-helper */ "use strict"; function query(sel) { return document.querySelector(sel); } function queryAll(sel) { return [...document.querySelectorAll(sel)]; } function iter(obj) { if(!obj) return []; var it = obj[Symbol.iterator]; if(it) return it; return Object.entries(obj); } function mk(tagname, attrs, ...children) { const el = document.createElement(tagname); for(const [k,v] of iter(attrs)) { if(k.slice(0,3) == "_on") { const eventName = k.slice(3); el.addEventListener(eventName, v); } else if(k[0] == "_") { // property, not attribute el[k.slice(1)] = v; } else { if(v === false || v == null) { continue; } else if(v === true) { el.setAttribute(k, ""); continue; } else { el.setAttribute(k, v); } } } append(el, children); return el; } /* Create shortcuts for every known HTML element */ [ "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "head", "header", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "label", "legend", "li", "link", "main", "map", "mark", "meta", "meter", "nav", "nobr", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "pre", "progress", "q", "s", "samp", "script", "section", "select", "small", "source", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "u", "ul", "var", "video", "wbr", "xmp", ].forEach(tagname=>{ mk[tagname] = (...args) => mk(tagname, ...args); }); function* nodesFromChildList(children) { for(const child of children.flat(Infinity)) { if(child instanceof Node) { yield child; } else { yield new Text(child); } } } function append(el, ...children) { for(const child of nodesFromChildList(children)) { if(el instanceof Node) el.appendChild(child); else el.push(child); } return el; } function insertAfter(el, ...children) { for(const child of nodesFromChildList(children)) { el.parentNode.insertBefore(child, el.nextSibling); } return el; } function clearContents(el) { el.innerHTML = ""; return el; } function parseHTML(markup) { if(markup.toLowerCase().trim().indexOf('<!doctype') === 0) { const doc = document.implementation.createHTMLDocument(""); doc.documentElement.innerHTML = markup; return doc; } else { const el = mk.template({}); el.innerHTML = markup; return el.content; } }</script> <script>/* Boilerplate: script-dfn-panel */ "use strict"; { let dfnPanelData = { "03675365": {"dfnID":"03675365","dfnText":"event handler IDL attribute","external":true,"refSections":[{"refs":[{"id":"ref-for-event-handler-idl-attributes"},{"id":"ref-for-event-handler-idl-attributes\u2460"}],"title":"Event handlers on elements, Document objects and Window objects"},{"refs":[{"id":"ref-for-event-handler-idl-attributes\u2461"}],"title":"Extensions to the GlobalEventHandlers Interface Mixin"}],"url":"https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-idl-attributes"}, "0cda95c2": {"dfnID":"0cda95c2","dfnText":"determine the scroll-into-view position","external":true,"refSections":[{"refs":[{"id":"ref-for-determine-the-scroll-into-view-position"}],"title":"3.1.1. \nInitial scroll target"}],"url":"https://drafts.csswg.org/cssom-view-1/#determine-the-scroll-into-view-position"}, "0ef4bcd3": {"dfnID":"0ef4bcd3","dfnText":"place-content","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-place-content"}],"title":"3.1.3. \nInteraction with place-content"}],"url":"https://www.w3.org/TR/css-align-3/#propdef-place-content"}, "129bdae8": {"dfnID":"129bdae8","dfnText":"Event","external":true,"refSections":[{"refs":[{"id":"ref-for-event"}],"title":"5.2. SnapEvent interface"}],"url":"https://dom.spec.whatwg.org/#event"}, "25538777": {"dfnID":"25538777","dfnText":"tree order","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-tree-order"}],"title":"3.1.1. \nInitial scroll target"}],"url":"https://dom.spec.whatwg.org/#concept-tree-order"}, "3705bb2d": {"dfnID":"3705bb2d","dfnText":"scroll snap area","external":true,"refSections":[{"refs":[{"id":"ref-for-scroll-snap-area"}],"title":"5.1.2. \nscrollsnapchange"}],"url":"https://www.w3.org/TR/css-scroll-snap-1/#scroll-snap-area"}, "44a7708c": {"dfnID":"44a7708c","dfnText":"EventInit","external":true,"refSections":[{"refs":[{"id":"ref-for-dictdef-eventinit"}],"title":"5.2. SnapEvent interface"}],"url":"https://dom.spec.whatwg.org/#dictdef-eventinit"}, "49a64d88": {"dfnID":"49a64d88","dfnText":"HTML elements","external":true,"refSections":[{"refs":[{"id":"ref-for-html-elements"}],"title":"Event handlers on elements, Document objects and Window objects"}],"url":"https://html.spec.whatwg.org/multipage/infrastructure.html#html-elements"}, "4eb9d37e": {"dfnID":"4eb9d37e","dfnText":"|","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-one"}],"title":"3.1.2. scroll-initial-target Property Definition"}],"url":"https://www.w3.org/TR/css-values-4/#comb-one"}, "552105cb": {"dfnID":"552105cb","dfnText":"scroll snap container","external":true,"refSections":[{"refs":[{"id":"ref-for-scroll-snap-container"}],"title":"5.1.1. \nSnap Targets"},{"refs":[{"id":"ref-for-scroll-snap-container\u2460"},{"id":"ref-for-scroll-snap-container\u2461"}],"title":"5.1.2. \nscrollsnapchange"},{"refs":[{"id":"ref-for-scroll-snap-container\u2462"},{"id":"ref-for-scroll-snap-container\u2463"},{"id":"ref-for-scroll-snap-container\u2464"}],"title":"5.1.3. scrollsnapchanging "},{"refs":[{"id":"ref-for-scroll-snap-container\u2465"}],"title":"5.1.4. Snap Events due to Layout Changes "}],"url":"https://www.w3.org/TR/css-scroll-snap-1/#scroll-snap-container"}, "5d7209e9": {"dfnID":"5d7209e9","dfnText":"Window","external":true,"refSections":[{"refs":[{"id":"ref-for-window"}],"title":"Event handlers on elements, Document objects and Window objects"}],"url":"https://html.spec.whatwg.org/multipage/nav-history-apis.html#window"}, "6a5a59a0": {"dfnID":"6a5a59a0","dfnText":"event handler","external":true,"refSections":[{"refs":[{"id":"ref-for-event-handlers"},{"id":"ref-for-event-handlers\u2460"}],"title":"Event handlers on elements, Document objects and Window objects"}],"url":"https://html.spec.whatwg.org/multipage/webappapis.html#event-handlers"}, "6e44a0d3": {"dfnID":"6e44a0d3","dfnText":"inline","external":true,"refSections":[{"refs":[{"id":"ref-for-value-def-inline"}],"title":"4.1. The Snapped-element Pseudo-class: :snapped"}],"url":"https://www.w3.org/TR/CSS21/visuren.html#value-def-inline"}, "72258dd1": {"dfnID":"72258dd1","dfnText":"scrollend","external":true,"refSections":[{"refs":[{"id":"ref-for-eventdef-document-scrollend"}],"title":"5.1.1. \nSnap Targets"},{"refs":[{"id":"ref-for-eventdef-document-scrollend\u2460"},{"id":"ref-for-eventdef-document-scrollend\u2461"}],"title":"5.1.2. \nscrollsnapchange"}],"url":"https://drafts.csswg.org/cssom-view-1/#eventdef-document-scrollend"}, "762ce945": {"dfnID":"762ce945","dfnText":"GlobalEventHandlers","external":true,"refSections":[{"refs":[{"id":"ref-for-globaleventhandlers"}],"title":"Extensions to the GlobalEventHandlers Interface Mixin"},{"refs":[{"id":"ref-for-globaleventhandlers\u2460"}],"title":"IDL Definition"}],"url":"https://html.spec.whatwg.org/multipage/webappapis.html#globaleventhandlers"}, "7f14f658": {"dfnID":"7f14f658","dfnText":"scroll","external":true,"refSections":[{"refs":[{"id":"ref-for-eventdef-document-scroll"}],"title":"5.1.1. \nSnap Targets"},{"refs":[{"id":"ref-for-eventdef-document-scroll\u2460"}],"title":"5.1.3. scrollsnapchanging "}],"url":"https://www.w3.org/TR/cssom-view-1/#eventdef-document-scroll"}, "85394472": {"dfnID":"85394472","dfnText":"Document","external":true,"refSections":[{"refs":[{"id":"ref-for-document"},{"id":"ref-for-document\u2460"}],"title":"5.1.1. \nSnap Targets"},{"refs":[{"id":"ref-for-document\u2461"},{"id":"ref-for-document\u2462"},{"id":"ref-for-document\u2463"}],"title":"5.1.2. \nscrollsnapchange"},{"refs":[{"id":"ref-for-document\u2464"},{"id":"ref-for-document\u2465"},{"id":"ref-for-document\u2466"}],"title":"5.1.3. scrollsnapchanging "},{"refs":[{"id":"ref-for-document\u2467"}],"title":"5.2. SnapEvent interface"},{"refs":[{"id":"ref-for-document\u2468"}],"title":"Event handlers on elements, Document objects and Window objects"}],"url":"https://dom.spec.whatwg.org/#document"}, "8855a9aa": {"dfnID":"8855a9aa","dfnText":"DOMString","external":true,"refSections":[{"refs":[{"id":"ref-for-idl-DOMString"}],"title":"5.2. SnapEvent interface"}],"url":"https://webidl.spec.whatwg.org/#idl-DOMString"}, "889e932f": {"dfnID":"889e932f","dfnText":"Exposed","external":true,"refSections":[{"refs":[{"id":"ref-for-Exposed"}],"title":"5.2. SnapEvent interface"}],"url":"https://webidl.spec.whatwg.org/#Exposed"}, "96c16e60": {"dfnID":"96c16e60","dfnText":"Node","external":true,"refSections":[{"refs":[{"id":"ref-for-node"},{"id":"ref-for-node\u2460"},{"id":"ref-for-node\u2461"},{"id":"ref-for-node\u2462"},{"id":"ref-for-node\u2463"},{"id":"ref-for-node\u2464"}],"title":"5.2. SnapEvent interface"}],"url":"https://dom.spec.whatwg.org/#node"}, "9b37b029": {"dfnID":"9b37b029","dfnText":"proximity","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-scroll-snap-type-proximity"}],"title":"5.1.2. \nscrollsnapchange"}],"url":"https://www.w3.org/TR/css-scroll-snap-1/#valdef-scroll-snap-type-proximity"}, "9d386f55": {"dfnID":"9d386f55","dfnText":"event handler event type","external":true,"refSections":[{"refs":[{"id":"ref-for-event-handler-event-type"},{"id":"ref-for-event-handler-event-type\u2460"}],"title":"Event handlers on elements, Document objects and Window objects"}],"url":"https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-event-type"}, "9e73f31a": {"dfnID":"9e73f31a","dfnText":"block","external":true,"refSections":[{"refs":[{"id":"ref-for-value-def-block"}],"title":"4.1. The Snapped-element Pseudo-class: :snapped"}],"url":"https://www.w3.org/TR/CSS21/visuren.html#value-def-block"}, "a2df9ed1": {"dfnID":"a2df9ed1","dfnText":"scroll snap position","external":true,"refSections":[{"refs":[{"id":"ref-for-scroll-snap-position"},{"id":"ref-for-scroll-snap-position\u2460"}],"title":"5.2. SnapEvent interface"}],"url":"https://www.w3.org/TR/css-scroll-snap-1/#scroll-snap-position"}, "a3972067": {"dfnID":"a3972067","dfnText":"initial scroll position","external":true,"refSections":[{"refs":[{"id":"ref-for-initial-scroll-position"},{"id":"ref-for-initial-scroll-position\u2460"}],"title":"3.1.1. \nInitial scroll target"},{"refs":[{"id":"ref-for-initial-scroll-position\u2461"}],"title":"3.1.3. \nInteraction with place-content"},{"refs":[{"id":"ref-for-initial-scroll-position\u2462"}],"title":"3.1.4. \nPost-first layout arrivals"}],"url":"https://www.w3.org/TR/css-overflow-3/#initial-scroll-position"}, "a3cabdb1": {"dfnID":"a3cabdb1","dfnText":"scroll container","external":true,"refSections":[{"refs":[{"id":"ref-for-scroll-container"},{"id":"ref-for-scroll-container\u2460"},{"id":"ref-for-scroll-container\u2461"}],"title":"3.1.1. \nInitial scroll target"},{"refs":[{"id":"ref-for-scroll-container\u2462"}],"title":"3.1.2. scroll-initial-target Property Definition"},{"refs":[{"id":"ref-for-scroll-container\u2463"}],"title":"3.1.3. \nInteraction with place-content"},{"refs":[{"id":"ref-for-scroll-container\u2464"},{"id":"ref-for-scroll-container\u2465"}],"title":"3.1.4. \nPost-first layout arrivals"}],"url":"https://www.w3.org/TR/css-overflow-3/#scroll-container"}, "b8bb50c6": {"dfnID":"b8bb50c6","dfnText":"scroll-snap-type","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-scroll-snap-type"}],"title":"5.1.2. \nscrollsnapchange"}],"url":"https://www.w3.org/TR/css-scroll-snap-1/#propdef-scroll-snap-type"}, "c4db3a90": {"dfnID":"c4db3a90","dfnText":"content-distribution properties","external":true,"refSections":[{"refs":[{"id":"ref-for-content-distribution-properties"}],"title":"3.1.3. \nInteraction with place-content"}],"url":"https://www.w3.org/TR/css-align-3/#content-distribution-properties"}, "ca9e4783": {"dfnID":"ca9e4783","dfnText":"scroll completed","external":true,"refSections":[{"refs":[{"id":"ref-for-scroll-completed"}],"title":"5.1.2. \nscrollsnapchange"}],"url":"https://drafts.csswg.org/cssom-view-1/#scroll-completed"}, "cc6d9aed": {"dfnID":"cc6d9aed","dfnText":"event handler content attribute","external":true,"refSections":[{"refs":[{"id":"ref-for-event-handler-content-attributes"}],"title":"Event handlers on elements, Document objects and Window objects"}],"url":"https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-content-attributes"}, "dictdef-snapeventinit": {"dfnID":"dictdef-snapeventinit","dfnText":"SnapEventInit","external":false,"refSections":[{"refs":[{"id":"ref-for-dictdef-snapeventinit"}],"title":"5.2. SnapEvent interface"}],"url":"#dictdef-snapeventinit"}, "document-dispatch-pending-scrollsnapchange-events": {"dfnID":"document-dispatch-pending-scrollsnapchange-events","dfnText":"dispatch pending scrollsnapchange events","external":false,"refSections":[],"url":"#document-dispatch-pending-scrollsnapchange-events"}, "document-dispatch-pending-scrollsnapchanging-events": {"dfnID":"document-dispatch-pending-scrollsnapchanging-events","dfnText":"dispatch pending scrollsnapchanging events","external":false,"refSections":[],"url":"#document-dispatch-pending-scrollsnapchanging-events"}, "document-pending-scrollsnapchange-event-targets": {"dfnID":"document-pending-scrollsnapchange-event-targets","dfnText":"pending scrollsnapchange event targets","external":false,"refSections":[{"refs":[{"id":"ref-for-document-pending-scrollsnapchange-event-targets"},{"id":"ref-for-document-pending-scrollsnapchange-event-targets\u2460"},{"id":"ref-for-document-pending-scrollsnapchange-event-targets\u2461"},{"id":"ref-for-document-pending-scrollsnapchange-event-targets\u2462"}],"title":"5.1.2. \nscrollsnapchange"}],"url":"#document-pending-scrollsnapchange-event-targets"}, "document-pending-scrollsnapchanging-event-targets": {"dfnID":"document-pending-scrollsnapchanging-event-targets","dfnText":"pending scrollsnapchanging event targets","external":false,"refSections":[{"refs":[{"id":"ref-for-document-pending-scrollsnapchanging-event-targets"},{"id":"ref-for-document-pending-scrollsnapchanging-event-targets\u2460"},{"id":"ref-for-document-pending-scrollsnapchanging-event-targets\u2461"},{"id":"ref-for-document-pending-scrollsnapchanging-event-targets\u2462"},{"id":"ref-for-document-pending-scrollsnapchanging-event-targets\u2463"},{"id":"ref-for-document-pending-scrollsnapchanging-event-targets\u2464"}],"title":"5.1.3. scrollsnapchanging "}],"url":"#document-pending-scrollsnapchanging-event-targets"}, "document-update-scrollsnapchange-targets": {"dfnID":"document-update-scrollsnapchange-targets","dfnText":"update scrollsnapchange targets","external":false,"refSections":[{"refs":[{"id":"ref-for-document-update-scrollsnapchange-targets"}],"title":"5.1.2. \nscrollsnapchange"},{"refs":[{"id":"ref-for-document-update-scrollsnapchange-targets\u2460"}],"title":"5.1.4. Snap Events due to Layout Changes "}],"url":"#document-update-scrollsnapchange-targets"}, "document-update-scrollsnapchanging-targets": {"dfnID":"document-update-scrollsnapchanging-targets","dfnText":"update scrollsnapchanging targets","external":false,"refSections":[{"refs":[{"id":"ref-for-document-update-scrollsnapchanging-targets"}],"title":"5.1.4. Snap Events due to Layout Changes "}],"url":"#document-update-scrollsnapchanging-targets"}, "dom-document-onscrollsnapchange": {"dfnID":"dom-document-onscrollsnapchange","dfnText":"onscrollsnapchange","external":false,"refSections":[],"url":"#dom-document-onscrollsnapchange"}, "dom-document-onscrollsnapchanging": {"dfnID":"dom-document-onscrollsnapchanging","dfnText":"onscrollsnapchanging","external":false,"refSections":[],"url":"#dom-document-onscrollsnapchanging"}, "dom-globaleventhandlers-onsnapchanged": {"dfnID":"dom-globaleventhandlers-onsnapchanged","dfnText":"onsnapchanged","external":false,"refSections":[],"url":"#dom-globaleventhandlers-onsnapchanged"}, "dom-globaleventhandlers-onsnapchanging": {"dfnID":"dom-globaleventhandlers-onsnapchanging","dfnText":"onsnapchanging","external":false,"refSections":[],"url":"#dom-globaleventhandlers-onsnapchanging"}, "dom-snapevent-snapevent": {"dfnID":"dom-snapevent-snapevent","dfnText":"constructor","external":false,"refSections":[],"url":"#dom-snapevent-snapevent"}, "dom-snapevent-snapevent-type-eventinitdict-eventinitdict": {"dfnID":"dom-snapevent-snapevent-type-eventinitdict-eventinitdict","dfnText":"eventInitDict","external":false,"refSections":[],"url":"#dom-snapevent-snapevent-type-eventinitdict-eventinitdict"}, "dom-snapevent-snapevent-type-eventinitdict-type": {"dfnID":"dom-snapevent-snapevent-type-eventinitdict-type","dfnText":"type","external":false,"refSections":[],"url":"#dom-snapevent-snapevent-type-eventinitdict-type"}, "dom-snapevent-snaptargetblock": {"dfnID":"dom-snapevent-snaptargetblock","dfnText":"snapTargetBlock","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-snapevent-snaptargetblock"}],"title":"5.1.2. \nscrollsnapchange"},{"refs":[{"id":"ref-for-dom-snapevent-snaptargetblock\u2460"}],"title":"5.1.3. scrollsnapchanging "},{"refs":[{"id":"ref-for-dom-snapevent-snaptargetblock\u2461"}],"title":"5.2. SnapEvent interface"}],"url":"#dom-snapevent-snaptargetblock"}, "dom-snapevent-snaptargetinline": {"dfnID":"dom-snapevent-snaptargetinline","dfnText":"snapTargetInline","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-snapevent-snaptargetinline"}],"title":"5.1.2. \nscrollsnapchange"},{"refs":[{"id":"ref-for-dom-snapevent-snaptargetinline\u2460"}],"title":"5.1.3. scrollsnapchanging "},{"refs":[{"id":"ref-for-dom-snapevent-snaptargetinline\u2461"}],"title":"5.2. SnapEvent interface"}],"url":"#dom-snapevent-snaptargetinline"}, "dom-snapeventinit-snaptargetblock": {"dfnID":"dom-snapeventinit-snaptargetblock","dfnText":"snapTargetBlock","external":false,"refSections":[],"url":"#dom-snapeventinit-snaptargetblock"}, "dom-snapeventinit-snaptargetinline": {"dfnID":"dom-snapeventinit-snaptargetinline","dfnText":"snapTargetInline","external":false,"refSections":[],"url":"#dom-snapeventinit-snaptargetinline"}, "eventdef-snapevent-scrollsnapchange": {"dfnID":"eventdef-snapevent-scrollsnapchange","dfnText":"scrollsnapchange","external":false,"refSections":[{"refs":[{"id":"ref-for-eventdef-snapevent-scrollsnapchange"}],"title":"5.1. scrollsnapchange and scrollsnapchanging"},{"refs":[{"id":"ref-for-eventdef-snapevent-scrollsnapchange\u2460"},{"id":"ref-for-eventdef-snapevent-scrollsnapchange\u2461"},{"id":"ref-for-eventdef-snapevent-scrollsnapchange\u2462"},{"id":"ref-for-eventdef-snapevent-scrollsnapchange\u2463"},{"id":"ref-for-eventdef-snapevent-scrollsnapchange\u2464"},{"id":"ref-for-eventdef-snapevent-scrollsnapchange\u2465"},{"id":"ref-for-eventdef-snapevent-scrollsnapchange\u2466"}],"title":"5.1.2. \nscrollsnapchange"},{"refs":[{"id":"ref-for-eventdef-snapevent-scrollsnapchange\u2467"},{"id":"ref-for-eventdef-snapevent-scrollsnapchange\u2468"}],"title":"5.1.3. scrollsnapchanging "},{"refs":[{"id":"ref-for-eventdef-snapevent-scrollsnapchange\u2460\u24ea"}],"title":"5.2. SnapEvent interface"},{"refs":[{"id":"ref-for-eventdef-snapevent-scrollsnapchange\u2460\u2460"}],"title":"Event handlers on elements, Document objects and Window objects"}],"url":"#eventdef-snapevent-scrollsnapchange"}, "eventdef-snapevent-scrollsnapchanging": {"dfnID":"eventdef-snapevent-scrollsnapchanging","dfnText":"scrollsnapchanging","external":false,"refSections":[{"refs":[{"id":"ref-for-eventdef-snapevent-scrollsnapchanging"}],"title":"5.1. scrollsnapchange and scrollsnapchanging"},{"refs":[{"id":"ref-for-eventdef-snapevent-scrollsnapchanging\u2460"},{"id":"ref-for-eventdef-snapevent-scrollsnapchanging\u2461"},{"id":"ref-for-eventdef-snapevent-scrollsnapchanging\u2462"},{"id":"ref-for-eventdef-snapevent-scrollsnapchanging\u2463"},{"id":"ref-for-eventdef-snapevent-scrollsnapchanging\u2464"},{"id":"ref-for-eventdef-snapevent-scrollsnapchanging\u2465"}],"title":"5.1.3. scrollsnapchanging "},{"refs":[{"id":"ref-for-eventdef-snapevent-scrollsnapchanging\u2466"}],"title":"5.2. SnapEvent interface"},{"refs":[{"id":"ref-for-eventdef-snapevent-scrollsnapchanging\u2467"}],"title":"Event handlers on elements, Document objects and Window objects"}],"url":"#eventdef-snapevent-scrollsnapchanging"}, "eventual-snap-target": {"dfnID":"eventual-snap-target","dfnText":"eventual snap target","external":false,"refSections":[{"refs":[{"id":"ref-for-eventual-snap-target"}],"title":"5.1.3. scrollsnapchanging "}],"url":"#eventual-snap-target"}, "f0951476": {"dfnID":"f0951476","dfnText":"EventHandler","external":true,"refSections":[{"refs":[{"id":"ref-for-eventhandler"},{"id":"ref-for-eventhandler\u2460"}],"title":"IDL Definition"}],"url":"https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler"}, "f1e0a109": {"dfnID":"f1e0a109","dfnText":"none","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-scroll-snap-type-none"},{"id":"ref-for-valdef-scroll-snap-type-none\u2460"}],"title":"5.1.2. \nscrollsnapchange"}],"url":"https://www.w3.org/TR/css-scroll-snap-1/#valdef-scroll-snap-type-none"}, "f6ae3416": {"dfnID":"f6ae3416","dfnText":"scroll snap","external":true,"refSections":[{"refs":[{"id":"ref-for-scroll-snap"}],"title":"5.1.1. \nSnap Targets"},{"refs":[{"id":"ref-for-scroll-snap\u2460"},{"id":"ref-for-scroll-snap\u2461"},{"id":"ref-for-scroll-snap\u2462"}],"title":"5.1.3. scrollsnapchanging "},{"refs":[{"id":"ref-for-scroll-snap\u2463"},{"id":"ref-for-scroll-snap\u2464"}],"title":"5.1.4. Snap Events due to Layout Changes "}],"url":"https://www.w3.org/TR/css-scroll-snap-1/#scroll-snap"}, "initial-scroll-target": {"dfnID":"initial-scroll-target","dfnText":"3.1.1. \nInitial scroll target","external":false,"refSections":[{"refs":[{"id":"ref-for-initial-scroll-target"},{"id":"ref-for-initial-scroll-target"},{"id":"ref-for-initial-scroll-target\u2460"},{"id":"ref-for-initial-scroll-target\u2461"},{"id":"ref-for-initial-scroll-target\u2462"}],"title":"3.1.1. \nInitial scroll target"},{"refs":[{"id":"ref-for-initial-scroll-target\u2463"},{"id":"ref-for-initial-scroll-target\u2464"}],"title":"3.1.2. scroll-initial-target Property Definition"},{"refs":[{"id":"ref-for-initial-scroll-target\u2465"},{"id":"ref-for-initial-scroll-target\u2466"}],"title":"3.1.4. \nPost-first layout arrivals"}],"url":"#initial-scroll-target"}, "propdef-scroll-initial-target": {"dfnID":"propdef-scroll-initial-target","dfnText":"scroll-initial-target","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-scroll-initial-target"}],"title":"3.1. The scroll-initial-target property"},{"refs":[{"id":"ref-for-propdef-scroll-initial-target\u2460"}],"title":"3.1.1. \nInitial scroll target"},{"refs":[{"id":"ref-for-propdef-scroll-initial-target\u2461"},{"id":"ref-for-propdef-scroll-initial-target\u2462"}],"title":"3.1.3. \nInteraction with place-content"}],"url":"#propdef-scroll-initial-target"}, "scrollsnapchangetargetblock": {"dfnID":"scrollsnapchangetargetblock","dfnText":"scrollsnapchangeTargetBlock","external":false,"refSections":[{"refs":[{"id":"ref-for-scrollsnapchangetargetblock"},{"id":"ref-for-scrollsnapchangetargetblock\u2460"},{"id":"ref-for-scrollsnapchangetargetblock\u2461"},{"id":"ref-for-scrollsnapchangetargetblock\u2462"},{"id":"ref-for-scrollsnapchangetargetblock\u2463"}],"title":"5.1.2. \nscrollsnapchange"}],"url":"#scrollsnapchangetargetblock"}, "scrollsnapchangetargetinline": {"dfnID":"scrollsnapchangetargetinline","dfnText":"scrollsnapchangeTargetInline","external":false,"refSections":[{"refs":[{"id":"ref-for-scrollsnapchangetargetinline"},{"id":"ref-for-scrollsnapchangetargetinline\u2460"},{"id":"ref-for-scrollsnapchangetargetinline\u2461"},{"id":"ref-for-scrollsnapchangetargetinline\u2462"},{"id":"ref-for-scrollsnapchangetargetinline\u2463"}],"title":"5.1.2. \nscrollsnapchange"}],"url":"#scrollsnapchangetargetinline"}, "scrollsnapchanging-block-axis-target": {"dfnID":"scrollsnapchanging-block-axis-target","dfnText":"scrollsnapchanging block-axis target","external":false,"refSections":[{"refs":[{"id":"ref-for-scrollsnapchanging-block-axis-target"},{"id":"ref-for-scrollsnapchanging-block-axis-target\u2460"}],"title":"5.1.2. \nscrollsnapchange"},{"refs":[{"id":"ref-for-scrollsnapchanging-block-axis-target\u2461"},{"id":"ref-for-scrollsnapchanging-block-axis-target\u2462"},{"id":"ref-for-scrollsnapchanging-block-axis-target\u2463"},{"id":"ref-for-scrollsnapchanging-block-axis-target\u2464"},{"id":"ref-for-scrollsnapchanging-block-axis-target\u2465"}],"title":"5.1.3. scrollsnapchanging "}],"url":"#scrollsnapchanging-block-axis-target"}, "scrollsnapchanging-inline-axis-target": {"dfnID":"scrollsnapchanging-inline-axis-target","dfnText":"scrollsnapchanging inline-axis target","external":false,"refSections":[{"refs":[{"id":"ref-for-scrollsnapchanging-inline-axis-target"},{"id":"ref-for-scrollsnapchanging-inline-axis-target\u2460"}],"title":"5.1.2. \nscrollsnapchange"},{"refs":[{"id":"ref-for-scrollsnapchanging-inline-axis-target\u2461"},{"id":"ref-for-scrollsnapchanging-inline-axis-target\u2462"},{"id":"ref-for-scrollsnapchanging-inline-axis-target\u2463"},{"id":"ref-for-scrollsnapchanging-inline-axis-target\u2464"},{"id":"ref-for-scrollsnapchanging-inline-axis-target\u2465"}],"title":"5.1.3. scrollsnapchanging "}],"url":"#scrollsnapchanging-inline-axis-target"}, "selectordef-snapped": {"dfnID":"selectordef-snapped","dfnText":":snapped","external":false,"refSections":[{"refs":[{"id":"ref-for-selectordef-snapped"}],"title":"4.1. The Snapped-element Pseudo-class: :snapped"}],"url":"#selectordef-snapped"}, "selectordef-snapped-block": {"dfnID":"selectordef-snapped-block","dfnText":":snapped-block","external":false,"refSections":[],"url":"#selectordef-snapped-block"}, "selectordef-snapped-inline": {"dfnID":"selectordef-snapped-inline","dfnText":":snapped-inline","external":false,"refSections":[],"url":"#selectordef-snapped-inline"}, "selectordef-snapped-x": {"dfnID":"selectordef-snapped-x","dfnText":":snapped-x","external":false,"refSections":[],"url":"#selectordef-snapped-x"}, "selectordef-snapped-y": {"dfnID":"selectordef-snapped-y","dfnText":":snapped-y","external":false,"refSections":[],"url":"#selectordef-snapped-y"}, "snap-target": {"dfnID":"snap-target","dfnText":"snap target","external":false,"refSections":[{"refs":[{"id":"ref-for-snap-target"},{"id":"ref-for-snap-target\u2460"},{"id":"ref-for-snap-target\u2461"}],"title":"5.1.1. \nSnap Targets"},{"refs":[{"id":"ref-for-snap-target\u2462"},{"id":"ref-for-snap-target\u2463"},{"id":"ref-for-snap-target\u2464"},{"id":"ref-for-snap-target\u2465"},{"id":"ref-for-snap-target\u2466"},{"id":"ref-for-snap-target\u2467"},{"id":"ref-for-snap-target\u2468"},{"id":"ref-for-snap-target\u2460\u24ea"}],"title":"5.1.2. \nscrollsnapchange"},{"refs":[{"id":"ref-for-snap-target\u2460\u2460"},{"id":"ref-for-snap-target\u2460\u2461"},{"id":"ref-for-snap-target\u2460\u2462"},{"id":"ref-for-snap-target\u2460\u2463"},{"id":"ref-for-snap-target\u2460\u2464"},{"id":"ref-for-snap-target\u2460\u2465"},{"id":"ref-for-snap-target\u2460\u2466"}],"title":"5.1.3. scrollsnapchanging "},{"refs":[{"id":"ref-for-snap-target\u2460\u2467"},{"id":"ref-for-snap-target\u2460\u2468"}],"title":"5.1.4. Snap Events due to Layout Changes "},{"refs":[{"id":"ref-for-snap-target\u2461\u24ea"},{"id":"ref-for-snap-target\u2461\u2460"}],"title":"5.2. SnapEvent interface"}],"url":"#snap-target"}, "snapevent": {"dfnID":"snapevent","dfnText":"SnapEvent","external":false,"refSections":[{"refs":[{"id":"ref-for-snapevent"},{"id":"ref-for-snapevent\u2460"}],"title":"5.1.1. \nSnap Targets"},{"refs":[{"id":"ref-for-snapevent\u2461"}],"title":"5.1.2. \nscrollsnapchange"},{"refs":[{"id":"ref-for-snapevent\u2462"}],"title":"5.1.3. scrollsnapchanging "},{"refs":[{"id":"ref-for-snapevent\u2463"},{"id":"ref-for-snapevent\u2464"}],"title":"5.2. SnapEvent interface"},{"refs":[{"id":"ref-for-snapevent\u2465"}],"title":"Extensions to the GlobalEventHandlers Interface Mixin"}],"url":"#snapevent"}, "valdef-scroll-initial-target-nearest": {"dfnID":"valdef-scroll-initial-target-nearest","dfnText":"nearest","external":false,"refSections":[],"url":"#valdef-scroll-initial-target-nearest"}, "valdef-scroll-initial-target-none": {"dfnID":"valdef-scroll-initial-target-none","dfnText":"none","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-scroll-initial-target-none"}],"title":"3.1.1. \nInitial scroll target"},{"refs":[{"id":"ref-for-valdef-scroll-initial-target-none\u2460"}],"title":"3.1.2. scroll-initial-target Property Definition"}],"url":"#valdef-scroll-initial-target-none"}, }; document.addEventListener("DOMContentLoaded", ()=>{ genAllDfnPanels(); document.body.addEventListener("click", (e) => { // If not handled already, just hide all dfn panels. hideAllDfnPanels(); }); }); window.addEventListener("resize", () => { // Pin any visible dfn panel queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(el=>positionDfnPanel(el)); }); function genAllDfnPanels() { for(const panelData of Object.values(dfnPanelData)) { const dfnID = panelData.dfnID; const dfn = document.getElementById(dfnID); if(!dfn) { console.log(`Can't find dfn#${dfnID}.`, panelData); continue; } dfn.panelData = panelData; insertDfnPopupAction(dfn); } } function genDfnPanel(dfn, { dfnID, url, dfnText, refSections, external }) { const dfnPanel = mk.aside({ class: "dfn-panel on", id: `infopanel-for-${dfnID}`, "data-for": dfnID, "aria-labelled-by":`infopaneltitle-for-${dfnID}`, }, mk.span({id:`infopaneltitle-for-${dfnID}`, style:"display:none"}, `Info about the '${dfnText}' ${external?"external":""} reference.`), mk.a({href:url, class:"dfn-link"}, url), refSections.length == 0 ? [] : mk.b({}, "Referenced in:"), mk.ul({}, ...refSections.map(section=> mk.li({}, ...section.refs.map((ref, refI)=> [ mk.a({ href: `#${ref.id}` }, (refI == 0) ? section.title : `(${refI + 1})` ), " ", ] ), ), ), ), genLinkingSyntaxes(dfn), ); dfnPanel.addEventListener('click', (event) => { if (event.target.nodeName == 'A') { scrollToTargetAndHighlight(event); pinDfnPanel(dfnPanel); } event.stopPropagation(); refocusOnTarget(event); }); dfnPanel.addEventListener('keydown', (event) => { if(event.keyCode == 27) { // Escape key hideDfnPanel({dfnPanel}); event.stopPropagation(); event.preventDefault(); } }); dfnPanel.dfn = dfn; dfn.dfnPanel = dfnPanel; return dfnPanel; } function hideAllDfnPanels() { // Delete the currently-active dfn panel. queryAll(".dfn-panel").forEach(dfnPanel=>hideDfnPanel({dfnPanel})); } function showDfnPanel(dfn) { hideAllDfnPanels(); // Only display one at a time. dfn.setAttribute("aria-expanded", "true"); const dfnPanel = genDfnPanel(dfn, dfn.panelData); // Give the dfn a unique tabindex, and then // give all the tabbable panel bits successive indexes. let tabIndex = 100; dfn.tabIndex = tabIndex++; const tabbable = dfnPanel.querySelectorAll(":is(a, button)"); for (const el of tabbable) { el.tabIndex = tabIndex++; } append(document.body, dfnPanel); positionDfnPanel(dfnPanel); } function positionDfnPanel(dfnPanel) { const dfn = dfnPanel.dfn; const dfnPos = getBounds(dfn); dfnPanel.style.top = dfnPos.bottom + "px"; dfnPanel.style.left = dfnPos.left + "px"; const panelPos = dfnPanel.getBoundingClientRect(); const panelMargin = 8; const maxRight = document.body.parentNode.clientWidth - panelMargin; if (panelPos.right > maxRight) { const overflowAmount = panelPos.right - maxRight; const newLeft = Math.max(panelMargin, dfnPos.left - overflowAmount); dfnPanel.style.left = newLeft + "px"; } } function pinDfnPanel(dfnPanel) { // Switch it to "activated" state, which pins it. dfnPanel.classList.add("activated"); dfnPanel.style.position = "fixed"; dfnPanel.style.left = null; dfnPanel.style.top = null; } function hideDfnPanel({dfn, dfnPanel}) { if(!dfnPanel) dfnPanel = dfn.dfnPanel; if(!dfn) dfn = dfnPanel.dfn; dfn.dfnPanel = undefined; dfnPanel.dfn = undefined; dfn.setAttribute("aria-expanded", "false"); dfn.tabIndex = undefined; dfnPanel.remove() } function toggleDfnPanel(dfn) { if(dfn.dfnPanel) { hideDfnPanel(dfn); } else { showDfnPanel(dfn); } } function insertDfnPopupAction(dfn) { dfn.setAttribute('role', 'button'); dfn.setAttribute('aria-expanded', 'false') dfn.tabIndex = 0; dfn.classList.add('has-dfn-panel'); dfn.addEventListener('click', (event) => { toggleDfnPanel(dfn); event.stopPropagation(); }); dfn.addEventListener('keypress', (event) => { const kc = event.keyCode; // 32->Space, 13->Enter if(kc == 32 || kc == 13) { toggleDfnPanel(dfn); event.stopPropagation(); event.preventDefault(); } }); } function refocusOnTarget(event) { const target = event.target; setTimeout(() => { // Refocus on the event.target element. // This is needed after browser scrolls to the destination. target.focus(); }); } // TODO: shared util // Returns the root-level absolute position {left and top} of element. function getBounds(el, relativeTo=document.body) { const relativeRect = relativeTo.getBoundingClientRect(); const elRect = el.getBoundingClientRect(); const top = elRect.top - relativeRect.top; const left = elRect.left - relativeRect.left; return { top, left, bottom: top + elRect.height, right: left + elRect.width, } } function scrollToTargetAndHighlight(event) { let hash = event.target.hash; if (hash) { hash = decodeURIComponent(hash.substring(1)); const dest = document.getElementById(hash); if (dest) { dest.classList.add('highlighted'); setTimeout(() => dest.classList.remove('highlighted'), 1000); } } } // Functions, divided by link type, that wrap an autolink's // contents with the appropriate outer syntax. // Alternately, a string naming another type they format // the same as. function needsFor(type) { switch(type) { case "descriptor": case "value": case "element-attr": case "attr-value": case "element-state": case "method": case "constructor": case "argument": case "attribute": case "const": case "dict-member": case "event": case "enum-value": case "stringifier": case "serializer": case "iterator": case "maplike": case "setlike": case "state": case "mode": case "context": case "facet": return true; default: return false; } } function refusesFor(type) { switch(type) { case "property": case "element": case "interface": case "namespace": case "callback": case "dictionary": case "enum": case "exception": case "typedef": case "http-header": case "permission": return true; default: return false; } } function linkFormatterFromType(type) { switch(type) { case 'scheme': case 'permission': case 'dfn': return (text) => `[=${text}=]`; case 'abstract-op': return (text) => `[\$${text}\$]`; case 'function': case 'at-rule': case 'selector': case 'value': return (text) => `''${text}''`; case 'http-header': return (text) => `[:${text}:]`; case 'interface': case 'constructor': case 'method': case 'argument': case 'attribute': case 'callback': case 'dictionary': case 'dict-member': case 'enum': case 'enum-value': case 'exception': case 'const': case 'typedef': case 'stringifier': case 'serializer': case 'iterator': case 'maplike': case 'setlike': case 'extended-attribute': case 'event': case 'idl': return (text) => `{{${text}}}`; case 'element-state': case 'element-attr': case 'attr-value': case 'element': return (element) => `<{${element}}>`; case 'grammar': return (text) => `${text} (within a <pre class=prod>)`; case 'type': return (text)=> `<<${text}>>`; case 'descriptor': case 'property': return (text) => `'${text}'`; default: return; }; }; function genLinkingSyntaxes(dfn) { if(dfn.tagName != "DFN") return; const type = dfn.getAttribute('data-dfn-type'); if(!type) { console.log(`<dfn> doesn't have a data-dfn-type:`, dfn); return []; } // Return a function that wraps link text based on the type const linkFormatter = linkFormatterFromType(type); if(!linkFormatter) { console.log(`<dfn> has an unknown data-dfn-type:`, dfn); return []; } let ltAlts; if(dfn.hasAttribute('data-lt')) { ltAlts = dfn.getAttribute('data-lt') .split("|") .map(x=>x.trim()); } else { ltAlts = [dfn.textContent.trim()]; } if(type == "type") { // lt of "<foo>", but "foo" is the interior; // <<foo/bar>> is how you write it with a for, // not <foo/<bar>> or whatever. for(var i = 0; i < ltAlts.length; i++) { const lt = ltAlts[i]; const match = /<(.*)>/.exec(lt); if(match) { ltAlts[i] = match[1]; } } } let forAlts; if(dfn.hasAttribute('data-dfn-for')) { forAlts = dfn.getAttribute('data-dfn-for') .split(",") .map(x=>x.trim()); } else { forAlts = ['']; } let linkingSyntaxes = []; if(!needsFor(type)) { for(const lt of ltAlts) { linkingSyntaxes.push(linkFormatter(lt)); } } if(!refusesFor(type)) { for(const f of forAlts) { linkingSyntaxes.push(linkFormatter(`${f}/${ltAlts[0]}`)) } } return [ mk.b({}, 'Possible linking syntaxes:'), mk.ul({}, ...linkingSyntaxes.map(link => { const copyLink = async () => await navigator.clipboard.writeText(link); return mk.li({}, mk.div({ class: 'link-item' }, mk.button({ class: 'copy-icon', title: 'Copy', type: 'button', _onclick: copyLink, tabindex: 0, }, mk.span({ class: 'icon' }) ), mk.span({}, link) ) ); }) ) ]; } } </script> <script>/* Boilerplate: script-ref-hints */ "use strict"; { let refsData = { "#dictdef-snapeventinit": {"displayText":"SnapEventInit","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-2","status":"local","text":"SnapEventInit","type":"dictionary","url":"#dictdef-snapeventinit"}, "#document-pending-scrollsnapchange-event-targets": {"displayText":"pending scrollsnapchange event targets","export":true,"for_":["Document"],"level":"2","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-2","status":"local","text":"pending scrollsnapchange event targets","type":"dfn","url":"#document-pending-scrollsnapchange-event-targets"}, "#document-pending-scrollsnapchanging-event-targets": {"displayText":"pending scrollsnapchanging event targets","export":true,"for_":["Document"],"level":"2","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-2","status":"local","text":"pending scrollsnapchanging event targets","type":"dfn","url":"#document-pending-scrollsnapchanging-event-targets"}, "#document-update-scrollsnapchange-targets": {"displayText":"update scrollsnapchange targets","export":true,"for_":["Document"],"level":"2","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-2","status":"local","text":"update scrollsnapchange targets","type":"dfn","url":"#document-update-scrollsnapchange-targets"}, "#document-update-scrollsnapchanging-targets": {"displayText":"update scrollsnapchanging targets","export":true,"for_":["Document"],"level":"2","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-2","status":"local","text":"update scrollsnapchanging targets","type":"dfn","url":"#document-update-scrollsnapchanging-targets"}, "#dom-snapevent-snaptargetblock": {"displayText":"snapTargetBlock","export":true,"for_":["SnapEvent"],"level":"2","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-2","status":"local","text":"snapTargetBlock","type":"attribute","url":"#dom-snapevent-snaptargetblock"}, "#dom-snapevent-snaptargetinline": {"displayText":"snapTargetInline","export":true,"for_":["SnapEvent"],"level":"2","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-2","status":"local","text":"snapTargetInline","type":"attribute","url":"#dom-snapevent-snaptargetinline"}, "#eventdef-snapevent-scrollsnapchange": {"displayText":"scrollsnapchange","export":true,"for_":["SnapEvent"],"level":"2","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-2","status":"local","text":"scrollsnapchange","type":"event","url":"#eventdef-snapevent-scrollsnapchange"}, "#eventdef-snapevent-scrollsnapchanging": {"displayText":"scrollsnapchanging","export":true,"for_":["SnapEvent"],"level":"2","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-2","status":"local","text":"scrollsnapchanging","type":"event","url":"#eventdef-snapevent-scrollsnapchanging"}, "#eventual-snap-target": {"displayText":"eventual snap target","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-2","status":"local","text":"eventual snap target","type":"dfn","url":"#eventual-snap-target"}, "#initial-scroll-target": {"displayText":"initial scroll target","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-2","status":"local","text":"initial scroll target","type":"dfn","url":"#initial-scroll-target"}, "#propdef-scroll-initial-target": {"displayText":"scroll-initial-target","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-2","status":"local","text":"scroll-initial-target","type":"property","url":"#propdef-scroll-initial-target"}, "#scrollsnapchangetargetblock": {"displayText":"scrollsnapchangetargetblock","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-2","status":"local","text":"scrollsnapchangetargetblock","type":"dfn","url":"#scrollsnapchangetargetblock"}, "#scrollsnapchangetargetinline": {"displayText":"scrollsnapchangetargetinline","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-2","status":"local","text":"scrollsnapchangetargetinline","type":"dfn","url":"#scrollsnapchangetargetinline"}, "#scrollsnapchanging-block-axis-target": {"displayText":"scrollsnapchanging block-axis target","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-2","status":"local","text":"scrollsnapchanging block-axis target","type":"dfn","url":"#scrollsnapchanging-block-axis-target"}, "#scrollsnapchanging-inline-axis-target": {"displayText":"scrollsnapchanging inline-axis target","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-2","status":"local","text":"scrollsnapchanging inline-axis target","type":"dfn","url":"#scrollsnapchanging-inline-axis-target"}, "#selectordef-snapped": {"displayText":":snapped","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-2","status":"local","text":":snapped","type":"selector","url":"#selectordef-snapped"}, "#snap-target": {"displayText":"snap target","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-2","status":"local","text":"snap target","type":"dfn","url":"#snap-target"}, "#snapevent": {"displayText":"SnapEvent","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-2","status":"local","text":"SnapEvent","type":"interface","url":"#snapevent"}, "#valdef-scroll-initial-target-none": {"displayText":"none","export":true,"for_":["scroll-initial-target"],"level":"2","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-2","status":"local","text":"none","type":"value","url":"#valdef-scroll-initial-target-none"}, "https://dom.spec.whatwg.org/#concept-tree-order": {"displayText":"tree order","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"tree order","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-tree-order"}, "https://dom.spec.whatwg.org/#dictdef-eventinit": {"displayText":"EventInit","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"EventInit","type":"dictionary","url":"https://dom.spec.whatwg.org/#dictdef-eventinit"}, "https://dom.spec.whatwg.org/#document": {"displayText":"Document","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"Document","type":"interface","url":"https://dom.spec.whatwg.org/#document"}, "https://dom.spec.whatwg.org/#event": {"displayText":"Event","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"Event","type":"interface","url":"https://dom.spec.whatwg.org/#event"}, "https://dom.spec.whatwg.org/#node": {"displayText":"Node","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"Node","type":"interface","url":"https://dom.spec.whatwg.org/#node"}, "https://drafts.csswg.org/cssom-view-1/#determine-the-scroll-into-view-position": {"displayText":"determine the scroll-into-view position","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"current","text":"determine the scroll-into-view position","type":"dfn","url":"https://drafts.csswg.org/cssom-view-1/#determine-the-scroll-into-view-position"}, "https://drafts.csswg.org/cssom-view-1/#eventdef-document-scrollend": {"displayText":"scrollend","export":true,"for_":["Document","Element","VisualViewport"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"current","text":"scrollend","type":"event","url":"https://drafts.csswg.org/cssom-view-1/#eventdef-document-scrollend"}, "https://drafts.csswg.org/cssom-view-1/#scroll-completed": {"displayText":"scroll completed","export":false,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"current","text":"scroll completed","type":"dfn","url":"https://drafts.csswg.org/cssom-view-1/#scroll-completed"}, "https://html.spec.whatwg.org/multipage/infrastructure.html#html-elements": {"displayText":"HTML elements","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"html elements","type":"dfn","url":"https://html.spec.whatwg.org/multipage/infrastructure.html#html-elements"}, "https://html.spec.whatwg.org/multipage/nav-history-apis.html#window": {"displayText":"Window","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"Window","type":"interface","url":"https://html.spec.whatwg.org/multipage/nav-history-apis.html#window"}, "https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-content-attributes": {"displayText":"event handler content attribute","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"event handler content attribute","type":"dfn","url":"https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-content-attributes"}, "https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-event-type": {"displayText":"event handler event type","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"event handler event type","type":"dfn","url":"https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-event-type"}, "https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-idl-attributes": {"displayText":"event handler IDL attribute","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"event handler idl attribute","type":"dfn","url":"https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-idl-attributes"}, "https://html.spec.whatwg.org/multipage/webappapis.html#event-handlers": {"displayText":"event handler","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"event handler","type":"dfn","url":"https://html.spec.whatwg.org/multipage/webappapis.html#event-handlers"}, "https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler": {"displayText":"EventHandler","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"EventHandler","type":"typedef","url":"https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler"}, "https://html.spec.whatwg.org/multipage/webappapis.html#globaleventhandlers": {"displayText":"GlobalEventHandlers","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"GlobalEventHandlers","type":"interface","url":"https://html.spec.whatwg.org/multipage/webappapis.html#globaleventhandlers"}, "https://webidl.spec.whatwg.org/#Exposed": {"displayText":"Exposed","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"Exposed","type":"extended-attribute","url":"https://webidl.spec.whatwg.org/#Exposed"}, "https://webidl.spec.whatwg.org/#idl-DOMString": {"displayText":"DOMString","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"DOMString","type":"interface","url":"https://webidl.spec.whatwg.org/#idl-DOMString"}, "https://www.w3.org/TR/CSS21/visuren.html#value-def-block": {"displayText":"block","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css21","status":"snapshot","text":"block","type":"dfn","url":"https://www.w3.org/TR/CSS21/visuren.html#value-def-block"}, "https://www.w3.org/TR/CSS21/visuren.html#value-def-inline": {"displayText":"inline","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css21","status":"snapshot","text":"inline","type":"dfn","url":"https://www.w3.org/TR/CSS21/visuren.html#value-def-inline"}, "https://www.w3.org/TR/css-align-3/#content-distribution-properties": {"displayText":"content-distribution properties","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"snapshot","text":"content-distribution properties","type":"dfn","url":"https://www.w3.org/TR/css-align-3/#content-distribution-properties"}, "https://www.w3.org/TR/css-align-3/#propdef-place-content": {"displayText":"place-content","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"snapshot","text":"place-content","type":"property","url":"https://www.w3.org/TR/css-align-3/#propdef-place-content"}, "https://www.w3.org/TR/css-overflow-3/#initial-scroll-position": {"displayText":"initial scroll position","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"snapshot","text":"initial scroll position","type":"dfn","url":"https://www.w3.org/TR/css-overflow-3/#initial-scroll-position"}, "https://www.w3.org/TR/css-overflow-3/#scroll-container": {"displayText":"scroll container","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"snapshot","text":"scroll container","type":"dfn","url":"https://www.w3.org/TR/css-overflow-3/#scroll-container"}, "https://www.w3.org/TR/css-scroll-snap-1/#propdef-scroll-snap-type": {"displayText":"scroll-snap-type","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-1","status":"snapshot","text":"scroll-snap-type","type":"property","url":"https://www.w3.org/TR/css-scroll-snap-1/#propdef-scroll-snap-type"}, "https://www.w3.org/TR/css-scroll-snap-1/#scroll-snap": {"displayText":"scroll snap","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-1","status":"snapshot","text":"scroll snap","type":"dfn","url":"https://www.w3.org/TR/css-scroll-snap-1/#scroll-snap"}, "https://www.w3.org/TR/css-scroll-snap-1/#scroll-snap-area": {"displayText":"scroll snap area","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-1","status":"snapshot","text":"scroll snap area","type":"dfn","url":"https://www.w3.org/TR/css-scroll-snap-1/#scroll-snap-area"}, "https://www.w3.org/TR/css-scroll-snap-1/#scroll-snap-container": {"displayText":"scroll snap container","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-1","status":"snapshot","text":"scroll snap container","type":"dfn","url":"https://www.w3.org/TR/css-scroll-snap-1/#scroll-snap-container"}, "https://www.w3.org/TR/css-scroll-snap-1/#scroll-snap-position": {"displayText":"scroll snap position","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-1","status":"snapshot","text":"scroll snap position","type":"dfn","url":"https://www.w3.org/TR/css-scroll-snap-1/#scroll-snap-position"}, "https://www.w3.org/TR/css-scroll-snap-1/#valdef-scroll-snap-type-none": {"displayText":"none","export":true,"for_":["scroll-snap-type"],"level":"1","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-1","status":"snapshot","text":"none","type":"value","url":"https://www.w3.org/TR/css-scroll-snap-1/#valdef-scroll-snap-type-none"}, "https://www.w3.org/TR/css-scroll-snap-1/#valdef-scroll-snap-type-proximity": {"displayText":"proximity","export":true,"for_":["scroll-snap-type"],"level":"1","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-1","status":"snapshot","text":"proximity","type":"value","url":"https://www.w3.org/TR/css-scroll-snap-1/#valdef-scroll-snap-type-proximity"}, "https://www.w3.org/TR/css-values-4/#comb-one": {"displayText":"|","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"|","type":"grammar","url":"https://www.w3.org/TR/css-values-4/#comb-one"}, "https://www.w3.org/TR/cssom-view-1/#eventdef-document-scroll": {"displayText":"scroll","export":true,"for_":["Document","Element"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"snapshot","text":"scroll","type":"event","url":"https://www.w3.org/TR/cssom-view-1/#eventdef-document-scroll"}, }; function mkRefHint(link, ref) { const linkText = link.textContent; let dfnTextElements = ''; if (ref.displayText.toLowerCase() != linkText.toLowerCase()) { // Give the original term if it's being displayed in a different way. // But allow casing differences, they're insignificant. dfnTextElements = mk.li({}, mk.b({}, "Term: "), mk.span({}, ref.displayText) ); } const forList = ref.for_; let forListElements; if(forList.length == 0) { forListElements = []; } else if(forList.length == 1) { forListElements = mk.li({}, mk.b({}, "For: "), mk.span({}, forList[0]), ); } else { forListElements = mk.li({}, mk.b({}, "For: "), mk.ul({}, ...forList.map(forItem => mk.li({}, mk.span({}, forItem) ), ), ), ); } const url = ref.url; const safeUrl = encodeURIComponent(url); const hintPanel = mk.aside({ class: "ref-hint", id: `ref-hint-for-${safeUrl}`, "data-for": url, "aria-labelled-by": `ref-hint-for-${safeUrl}`, }, mk.ul({}, dfnTextElements, mk.li({}, mk.b({}, "URL: "), mk.a({ href: url, class: "ref" }, url), ), mk.li({}, mk.b({}, "Type: "), mk.span({}, `${ref.type}`), ), mk.li({}, mk.b({}, "Spec: "), mk.span({}, `${ref.spec ? ref.spec : ''}`), ), forListElements ), ); hintPanel.forLink = link; setupRefHintEventListeners(link, hintPanel); return hintPanel; } function hideAllRefHints() { queryAll(".ref-hint").forEach(el=>hideRefHint(el)); } function hideRefHint(refHint) { const link = refHint.forLink; link.setAttribute("aria-expanded", "false"); if(refHint.teardownEventListeners) { refHint.teardownEventListeners(); } refHint.remove(); } function showRefHint(link) { if(link.classList.contains("dfn-link")) return; const url = link.getAttribute("href"); const ref = refsData[url]; if(!ref) return; hideAllRefHints(); // Only display one at this time. const refHint = mkRefHint(link, ref); append(document.body, refHint); link.setAttribute("aria-expanded", "true"); positionRefHint(refHint); } function setupRefHintEventListeners(link, refHint) { if (refHint.teardownEventListeners) return; // Add event handlers to hide the refHint after the user moves away // from both the link and refHint, if not hovering either within one second. let timeout = null; const startHidingRefHint = (event) => { if (timeout) { clearTimeout(timeout); } timeout = setTimeout(() => { hideRefHint(refHint); }, 1000); } const resetHidingRefHint = (event) => { if (timeout) clearTimeout(timeout); timeout = null; }; link.addEventListener("mouseleave", startHidingRefHint); link.addEventListener("mouseenter", resetHidingRefHint); link.addEventListener("blur", startHidingRefHint); link.addEventListener("focus", resetHidingRefHint); refHint.addEventListener("mouseleave", startHidingRefHint); refHint.addEventListener("mouseenter", resetHidingRefHint); refHint.addEventListener("blur", startHidingRefHint); refHint.addEventListener("focus", resetHidingRefHint); refHint.teardownEventListeners = () => { // remove event listeners resetHidingRefHint(); link.removeEventListener("mouseleave", startHidingRefHint); link.removeEventListener("mouseenter", resetHidingRefHint); link.removeEventListener("blur", startHidingRefHint); link.removeEventListener("focus", resetHidingRefHint); refHint.removeEventListener("mouseleave", startHidingRefHint); refHint.removeEventListener("mouseenter", resetHidingRefHint); refHint.removeEventListener("blur", startHidingRefHint); refHint.removeEventListener("focus", resetHidingRefHint); }; } function positionRefHint(refHint) { const link = refHint.forLink; const linkPos = getBounds(link); refHint.style.top = linkPos.bottom + "px"; refHint.style.left = linkPos.left + "px"; const panelPos = refHint.getBoundingClientRect(); const panelMargin = 8; const maxRight = document.body.parentNode.clientWidth - panelMargin; if (panelPos.right > maxRight) { const overflowAmount = panelPos.right - maxRight; const newLeft = Math.max(panelMargin, linkPos.left - overflowAmount); refHint.style.left = newLeft + "px"; } } // TODO: shared util // Returns the root-level absolute position {left and top} of element. function getBounds(el, relativeTo=document.body) { const relativeRect = relativeTo.getBoundingClientRect(); const elRect = el.getBoundingClientRect(); const top = elRect.top - relativeRect.top; const left = elRect.left - relativeRect.left; return { top, left, bottom: top + elRect.height, right: left + elRect.width, } } function showRefHintListener(e) { // If the target isn't in a link (or is a link), // just ignore it. let link = e.target.closest("a"); if(!link) return; // If the target is in a ref-hint panel // (aka a link in the already-open one), // also just ignore it. if(link.closest(".ref-hint")) return; // Otherwise, show the panel for the link. showRefHint(link); } function hideAllHintsListener(e) { // If the click is inside a ref-hint panel, ignore it. if(e.target.closest(".ref-hint")) return; // Otherwise, close all the current panels. hideAllRefHints(); } document.addEventListener("DOMContentLoaded", () => { document.body.addEventListener("mousedown", showRefHintListener); document.body.addEventListener("focus", showRefHintListener); document.body.addEventListener("click", hideAllHintsListener); }); window.addEventListener("resize", () => { // Hide any open ref hint. hideAllRefHints(); }); } </script> <script>/* Boilerplate: script-var-click-highlighting */ "use strict"; { /* Color-choosing design: * Colors are ordered by goodness. * On clicking a var, give it the earliest color with the lowest usage in the algorithm. * On re-clicking, re-use the var's most recent color if that's not currently being used elsewhere. */ const COLOR_COUNT = 7; document.addEventListener("click", e=>{ if(e.target.nodeName == "VAR") { highlightSameAlgoVars(e.target); } }); function highlightSameAlgoVars(v) { // Find the algorithm container. let algoContainer = findAlgoContainer(v); // Not highlighting document-global vars, // too likely to be unrelated. if(algoContainer == null) return; const varName = nameFromVar(v); if(!v.hasAttribute("data-var-color")) { const newColor = chooseHighlightColor(algoContainer, v); for(const el of algoContainer.querySelectorAll("var")) { if(nameFromVar(el) == varName) { el.setAttribute("data-var-color", newColor); el.setAttribute("data-var-last-color", newColor); } } } else { for(const el of algoContainer.querySelectorAll("var")) { if(nameFromVar(el) == varName) { el.removeAttribute("data-var-color"); } } } } function findAlgoContainer(el) { while(el != document.body) { if(el.hasAttribute("data-algorithm")) return el; el = el.parentNode; } return null; } function nameFromVar(el) { return el.textContent.replace(/(\s|\xa0)+/g, " ").trim(); } function colorCountsFromContainer(container) { const namesFromColor = Array.from({length:COLOR_COUNT}, x=>new Set()); for(let v of container.querySelectorAll("var[data-var-color]")) { let color = +v.getAttribute("data-var-color"); namesFromColor[color].add(nameFromVar(v)); } return namesFromColor.map(x=>x.size); } function leastUsedColor(colors) { // Find the earliest color with the lowest count. let minCount = Infinity; let minColor = null; for(var i = 0; i < colors.length; i++) { if(colors[i] < minCount) { minColor = i; minCount = colors[i]; } } return minColor; } function chooseHighlightColor(container, v) { const colorCounts = colorCountsFromContainer(container); if(v.hasAttribute("data-var-last-color")) { let color = +v.getAttribute("data-var-last-color"); if(colorCounts[color] == 0) return color; } return leastUsedColor(colorCounts); } } </script>