2b:null 2c:["$","title",null,{"children":"Scroll split test 0 | Grant Custer | Observable"}] 31:T847,{ let view = html`

`; let scroll_blank = html`

`; let content = html`

`; let indicator_height = 20; let left_indicator = html``; let right_indicator = html``; let splitter = html`

`; // layout let w = width; let h = window_height; let wa = w / h; view.addEventListener("mousemove", e => { mutable offset_x = e.offsetX; }); view.addEventListener("touchstart", e => { mutable offset_x = e.touches[0].pageX - e.touches[0].target.offsetLeft; }); let is_scrolling; view.addEventListener("scroll", e => { let scroll = e.target.scrollTop; window.clearTimeout(is_scrolling); if (mutable offset_x < w / 2) { right_indicator.style.display = "none"; left_indicator.style.display = "block"; content.style.background = "cyan"; } else { left_indicator.style.display = "none"; right_indicator.style.display = "block"; content.style.background = "magenta"; } is_scrolling = setTimeout(function() { left_indicator.style.display = "none"; right_indicator.style.display = "none"; }, 66); }); scroll_blank.appendChild(content); scroll_blank.appendChild(left_indicator); scroll_blank.appendChild(right_indicator); scroll_blank.appendChild(splitter); view.appendChild(scroll_blank); return view; }32:[] 2f:{"id":"53194434e415af31","slug":"scroll-split-test-0","title":"Scroll split test 0","thumbnail":"e61c8ae6e6c4f569c06d31ded7e97f7a54b39d0297efd7e963d8ce4d31aa4cec","access_level":"public","create_time":"$D2018-12-22T22:13:10.078Z","update_time":"$D2018-12-22T22:48:37.756Z","view_time":null,"first_public_time":"$D2018-12-22T22:38:12.291Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"bf2c1edd2a33aa1b","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":"starter_2024"},"version":45,"publish_version":45,"role":null,"authored":false,"authors":[{"type":"individual","id":"a1f8c368ee3d80be","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":null}],"members":[{"type":"individual","id":"a1f8c368ee3d80be","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"050d50cae731b0ac","slug":"scollers","title":"Scrollers","owner":{"id":"bf2c1edd2a33aa1b","login":"grantcuster","name":"Grant Custer"}},"type":"notebook","body":{"title":"Scroll split test 0","cells":[{"id":0,"value":"md`# Scroll split test 0`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"md`Thinking about UI where things are different depending on which half of the screen you scroll on. Starting with a minimal version for some mobile debugging.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"mutable offset_x = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"window_height = 250","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"