{"id":26457218,"url":"https://github.com/karolinepauls/scrolly-wrappy","last_synced_at":"2025-07-11T12:36:46.141Z","repository":{"id":182717612,"uuid":"178250242","full_name":"karolinepauls/scrolly-wrappy","owner":"karolinepauls","description":"Drag-to-scroll. Mirror of https://gitlab.com/karolinepauls/scrolly-wrappy","archived":false,"fork":false,"pushed_at":"2019-03-28T17:32:02.000Z","size":749,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2024-04-16T07:33:55.640Z","etag":null,"topics":["clojurescript","reagent","reagent-components"],"latest_commit_sha":null,"homepage":"https://karolinepauls.gitlab.io/scrolly-wrappy/","language":"Clojure","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"epl-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/karolinepauls.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2019-03-28T17:17:38.000Z","updated_at":"2019-03-28T17:35:05.000Z","dependencies_parsed_at":"2023-07-21T05:40:16.612Z","dependency_job_id":null,"html_url":"https://github.com/karolinepauls/scrolly-wrappy","commit_stats":null,"previous_names":["karolinepauls/scrolly-wrappy"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/karolinepauls%2Fscrolly-wrappy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/karolinepauls%2Fscrolly-wrappy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/karolinepauls%2Fscrolly-wrappy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/karolinepauls%2Fscrolly-wrappy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/karolinepauls","download_url":"https://codeload.github.com/karolinepauls/scrolly-wrappy/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244320415,"owners_count":20434092,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clojurescript","reagent","reagent-components"],"created_at":"2025-03-18T22:58:24.953Z","updated_at":"2025-03-18T22:58:25.487Z","avatar_url":"https://github.com/karolinepauls.png","language":"Clojure","funding_links":[],"categories":[],"sub_categories":[],"readme":"# scrolly-wrappy [![Clojars Project](https://img.shields.io/clojars/v/scrolly-wrappy.svg)](https://clojars.org/scrolly-wrappy)\n\nReagent component to provide a friendly 2-dimensional drag-to-scroll experience. [Browser demo](https://karolinepauls.gitlab.io/scrolly-wrappy/).\n\nOn mobile (tested on Firefox for Android and Chrome) the difference from the native experience\nis in 2-dimensionality of scrolling (normally it is locked to whichever axis the browser detects as\ndominating) and lack of momentum-based scrolling, which may be detrimental.\n\n![scrolly-wrappy in action](scrolly-wrappy.gif)\n\n## Overview\n\nThe component wraps arbitrarily long and wide content, providing horizontal drag-to-scroll within\nthe boundaries of the wrapper and vertical drag-to-scroll synchronised with the entire page.\n\n```clojure\n(defn demo-view []\n  [scrolly-wrappy\n   [:svg {:width \"2000px\" :height \"2000px\"}\n    [:path {:d \"M 1 1999 L 999 1 L 1999 1999 L 1 1999\" :fill \"#aaa\" :stroke \"#333\"}]]])\n```\n\nIt is the caller's job to correctly centre the content in case happens to be smaller than the\nwrapper.\n\n\n### Options\n\n```clojure\n(def is-dragged? (r/atom false))  ; Use it do e.g. disable interactivity of dragged content.\n\n(defn demo-view []\n  [scrolly-wrappy {:initial-centre-fn (fn [width] (- width (/ width 4)))  ; Centre at 3/4.\n                   :on-drag-start #(reset! is-dragged? true)\n                   :on-drag-end #(reset! is-dragged? false)}\n   [:svg {:width \"2000px\" :height \"2000px\"}\n    [:path {:d \"M 1 1999 L 999 1 L 1999 1999 L 1 1999\" :fill \"#aaa\" :stroke \"#333\"}]]])\n```\n\n### Style\n\nYou may want to add the following CSS.\n\n```css\ndiv.scrolly-wrappy-wrapper:hover {\n    cursor: pointer;\n}\n```\n\n## Dev/demo Setup\n\nTo get an interactive development environment/demo run:\n\n    lein figwheel\n\nand open your browser at [localhost:3449](http://localhost:3449/).\nThis will auto compile and send all changes to the browser without the\nneed to reload. After the compilation process is complete, you will\nget a Browser Connected REPL. An easy way to try it is:\n\n    (js/alert \"Am I connected?\")\n\nand you should see an alert in the browser window.\n\nTo clean all compiled files:\n\n    lein clean\n\nTo build a figwheel-less demo, run:\n\n    lein do clean, cljsbuild once static-demo\n\nAnd open your browser in `resources/public/index.html`. You will not\nget live reloading, nor a REPL. \n\n## Acknowledgements\n\nThe scrolly-wrappy component has been extracted from https://github.com/infectious/ephyra.\n\n## License\n\nSee LICENCE.\n\nCopyright © 2019 Karoline Pauls, Infectious Media\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkarolinepauls%2Fscrolly-wrappy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkarolinepauls%2Fscrolly-wrappy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkarolinepauls%2Fscrolly-wrappy/lists"}