2d:null 2e:["$","title",null,{"children":"Custom cursor for scroll vertical | Dongkeon Kim | Observable"}] 33:T415,{ const wrapper = html`

Enter Mouse! Here

scroll zoom

`; let scale = 1; const dd = wrapper.querySelector('#dot'); const msg = wrapper.querySelector('#message'); let right = 0; wrapper.addEventListener('mouseenter', function(e) { dd.style.display = 'inline-flex'; }); wrapper.addEventListener('mouseleave', function(e) { dd.style.display = 'none'; }); wrapper.addEventListener('mousemove', function(e) { const { left, top } = this.getBoundingClientRect(); const { clientX, clientY } = e; const x = clientX - left - dd.offsetWidth / 2; const y = clientY - top - dd.offsetHeight / 2; dd.style.transform = `translate(${x}px, ${y}px)`; }); wrapper.addEventListener('wheel', function(e) { e.preventDefault(); scale += e.deltaY * -0.01; scale = Math.min(Math.max(.125, scale), 4); msg.style.transform = `scale(${scale})`; }); return scoped(wrapper, divCss); }34:[] 31:{"id":"c5a0cfc0d3cc1a47","slug":"custom-cursor","title":"Custom cursor for scroll vertical","thumbnail":"cb489863584b289f1d41a2b30b5dff23f6c10dd114151c868c3c305806cda95a","access_level":"public","create_time":"$D2021-01-14T01:36:24.735Z","update_time":"$D2021-01-14T07:31:28.565Z","view_time":null,"first_public_time":"$D2021-01-14T06:15:54.918Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"64cc9d68e5d088c1","login":"shallwefootball","name":"Dongkeon Kim","avatar_url":"https://avatars-next.observableusercontent.com/cbe1da14d9ccb3c694b88749da169d64ef4bd48d2ff3726981cebcd7b1a3f140","tier":"starter_2024"},"version":294,"publish_version":294,"role":null,"authored":false,"authors":[{"type":"individual","id":"f6cdfbc9862bdb3e","login":"shallwefootball","name":"Dongkeon Kim","avatar_url":"https://avatars-next.observableusercontent.com/cbe1da14d9ccb3c694b88749da169d64ef4bd48d2ff3726981cebcd7b1a3f140","tier":null}],"members":[{"type":"individual","id":"f6cdfbc9862bdb3e","login":"shallwefootball","name":"Dongkeon Kim","avatar_url":"https://avatars-next.observableusercontent.com/cbe1da14d9ccb3c694b88749da169d64ef4bd48d2ff3726981cebcd7b1a3f140","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Custom cursor for scroll vertical","cells":[{"id":0,"value":"md`# Custom cursor for scroll vertical\n\n

\n\nThis custom cursor is useful for using [simple zoom chart](https://observablehq.com/@d3/zoomable-bar-chart?collection=@d3/d3-zoom) because a user of not learn scroll action can't recognize scroll action by just see it.\n\nThere is [CSS cursor property](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) called \"all-scroll\"

. But it's too difficult to recognize that should do act to scroll. Even there is no only vertical or horizontal cursor.\n\nSo this custom scroll icon helpful for the first use of scroll. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"divCss = `\np {\n margin: 0;\n}\n\n#wrapper {\n width: ${width}px;\n height: 300px;\n border: 3px solid #333;\n overflow: hidden;\n}\n#wrapper:hover {\n cursor: none;\n}\n\n#message {\n position: absolute;\n top: 50%;\n left: 41%;\n}\n\n#dot {\n display: none;\n flex-direction: column;\n align-items: center;\n}\n#dot p {\n position: relative;\n margin-top: 5px;\n text-align: center;\n font-size: 10px;\n}\n\n.icon-scroll {\n position: relative;\n width: 20px;\n height: 30px;\n box-shadow: inset 0 0 0 1px #333;\n border-radius: 25px;\n}\n.icon-scroll:before {\n content: '';\n position: absolute;\n width: 4px;\n height: 4px;\n background: #333;\n margin-left: 8px;\n top: 8px;\n border-radius: 2px;\n animation-duration: 1.5s;\n animation-iteration-count: infinite;\n animation-name: scroll;\n}\n@keyframes scroll {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n transform: translateY(10px);\n }\n}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"md`## Ref\n\n - [Scroll Icon Indicator Pure CSS](https://codepen.io/khalilbenihoud/pen/wBJVLK)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"import { scoped } from '@severo/scoped-css'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"