25:["$","title",null,{"children":"CSS - overflow-anchor, Scroll Anchoring behavior | playground | Observable"}] 49:[] 29:{"id":"5c2de1f539e53771","slug":null,"title":"CSS - overflow-anchor, Scroll Anchoring behavior","thumbnail":"58bec18dd1a731579e1ed44bdc7819c3167e796850adf0e384188c857aa75bba","access_level":"public","create_time":"$D2023-03-23T05:25:23.791Z","update_time":"$D2024-12-24T10:15:03.991Z","view_time":null,"first_public_time":"$D2023-03-23T05:25:23.791Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"3533f3924f76c1f3","login":"lab-pg","name":"playground","avatar_url":"https://avatars-next.observableusercontent.com/ccd9351c53f277156177f94833870f600abd74fc44bcd7c46623337c8f5082bc","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":239,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"63f207d190d71b00","login":"baotlake","name":"Momo","avatar_url":"https://avatars-next.observableusercontent.com/0eb2840e8ef41835a2f51de7cd8c5fbdd60db2f081419e50ef0bfb28124b69d9","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"63f207d190d71b00","login":"baotlake","name":"Momo","avatar_url":"https://avatars-next.observableusercontent.com/0eb2840e8ef41835a2f51de7cd8c5fbdd60db2f081419e50ef0bfb28124b69d9","tier":null,"role":"editor"},{"type":"team","id":"3533f3924f76c1f3","login":"lab-pg","name":"playground","avatar_url":"https://avatars-next.observableusercontent.com/ccd9351c53f277156177f94833870f600abd74fc44bcd7c46623337c8f5082bc","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"CSS - overflow-anchor, Scroll Anchoring behavior","cells":[{"id":0,"value":"# CSS - overflow-anchor, Scroll Anchoring behavior\n\n- [MDN - overflow-anchor](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"viewof input = Inputs.range([5, 1000], { value: 10, step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"Inputs.button([\n [\n \"start\",\n () =>\n (window._id = setInterval(() => {\n window._h = (window._h || 0) + 1;\n mutable h = window._h;\n }, 30))\n ],\n [\"stop\", () => clearInterval(window._id)]\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"mutable h = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"{\n mutable h = input;\n window._h = input\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"

\n \n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"{\n // const div = document.querySelector(\"#h\");\n // div.style.height = h + \"px\";\n // const container = div.parentElement;\n // const { scrollHeight, scrollTop, clientHeight } = container;\n // const overflowY = scrollHeight - clientHeight;\n // if (scrollTop == 0 && overflowY > 0 && overflowY < 60) {\n // container.scrollTop = overflowY;\n // }\n // return h;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"{\n // safari\n const div = document.querySelector(\"#h\");\n div.style.height = h + \"px\";\n const container = div.parentElement;\n const { scrollHeight, scrollTop, clientHeight } = container;\n const overflowY = scrollHeight - clientHeight;\n const bottom = scrollHeight - scrollTop - clientHeight;\n\n const dy = scrollTop - window.lastScrollTop ?? 0;\n if (dy != 0) {\n window.dy = dy;\n }\n if (scrollHeight <= clientHeight) {\n window.dy = 0;\n }\n console.log(\"safari: \", window.dy, overflowY, bottom);\n\n if (window.lastScrollTop != scrollTop) {\n window.lastScrollTop = scrollTop;\n }\n if (window.dy >= 0 && overflowY > 0 && bottom < 30) {\n container.scrollTop = overflowY;\n }\n return h;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"## insert\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":101,"value":"{\n const div = document.createElement(\"div\");\n div.id = '#app1'\n div.className = \"w-full h-96 m-2\";\n\n yield div;\n\n const { createApp, ref, onMounted } = Vue;\n\n createApp({\n setup() {\n console.log(\"Setup\");\n const a = ref(\"AAAAA\");\n\n onMounted(() => {\n console.log(\"Mounted\");\n });\n\n return {\n a\n };\n },\n\n template: `

AAA: {{a}}

`\n }).mount(div);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"## Setup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":85,"value":"import { tailwind } from '@pkg/tailwind'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"tailwind","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"Vue = import(\"https://esm.sh/vue@3.4.27/dist/vue.esm-bundler.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 24:null