{"id":17344725,"url":"https://github.com/jamonserrano/scrollmarks","last_synced_at":"2025-03-27T10:20:16.341Z","repository":{"id":143907825,"uuid":"91901121","full_name":"jamonserrano/scrollmarks","owner":"jamonserrano","description":"Scrollmarks is a compact library that calls a function when you scroll to an element","archived":false,"fork":false,"pushed_at":"2018-03-18T17:07:42.000Z","size":143,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-12T20:24:08.831Z","etag":null,"topics":["callbacks","elements","events","library","scroll"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jamonserrano.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-20T16:15:54.000Z","updated_at":"2018-03-18T17:07:43.000Z","dependencies_parsed_at":null,"dependency_job_id":"b6d75c01-4cb2-480a-99d0-aacd33529b17","html_url":"https://github.com/jamonserrano/scrollmarks","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamonserrano%2Fscrollmarks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamonserrano%2Fscrollmarks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamonserrano%2Fscrollmarks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamonserrano%2Fscrollmarks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jamonserrano","download_url":"https://codeload.github.com/jamonserrano/scrollmarks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245115231,"owners_count":20563117,"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":["callbacks","elements","events","library","scroll"],"created_at":"2024-10-15T16:26:20.911Z","updated_at":"2025-03-27T10:20:16.319Z","avatar_url":"https://github.com/jamonserrano.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Scrollmarks\n\nScrollmarks is a compact library that calls a function when you scroll to an element.\n\n[![Build Status](https://travis-ci.org/jamonserrano/scrollmarks.svg?branch=master)](https://travis-ci.org/jamonserrano/scrollmarks)\n[![Coverage Status](https://coveralls.io/repos/github/jamonserrano/scrollmarks/badge.svg?branch=master)](https://coveralls.io/github/jamonserrano/scrollmarks?branch=master)\n\n[![Build Status](https://saucelabs.com/browser-matrix/jamonserrano-scrollmarks.svg)](https://saucelabs.com/open_sauce/user/jamonserrano-scrollmarks)\n\n## About\n\nScrollmarks is inspired by the awesome [Waypoints](http://imakewebthings.com/waypoints/) library. It aims to do less, add some missing features, and provide more speed by leveraging modern browser APIs. The most important features:\n\n* Handles resize events and document height changes\n* Only handles vertical scrolling of the whole document\n* Customizable responsiveness and performance\n* [Fast](https://jsperf.com/scrollmarks-vs-waypoints-init) and small (10.1KB, 2.3KB minified \u0026 gzipped)\n* Light on browser resources\n* Only supports evergreen browsers and IE10+\n\n## Installation\nInstall with npm or yarn:\n\n```sh\n# npm\n$ npm install scrollmarks --save\n\n# yarn\n$ yarn add scrollmarks\n```\n\nOr download the [latest release](https://github.com/jamonserrano/scrollmarks/releases/latest) from GitHub.\n\n## Usage\n\n### Add a scrollmark\n\n```js\nScrollmarks.add({\n\telement: document.querySelector('.my-element'),\n\tcallback: () =\u003e console.log('The element reached the top!')\n});\n```\n\nThe callback function will be executed when the top of the element reaches the top of the viewport.\n\n### Callbacks\nThe callback function receives two parameters: the scroll direction (`'up'` or `'down'`) and the mark that triggered it.\n\n```js\ncallback: (direction, mark) =\u003e console.log(`The user was scrolling ${direction}`)\n```\n\n\u003e Instead of bounding the callback to the element, the mark is passed as a parameter so you can inspect and use its properties.\n\nCallbacks can be removed after the first run by adding the `once: true` parameter.\n\n### Offsets\n\nYou can modify the point where the callback is triggered by specifying an offset.\n\n##### Number of pixels\n`offset: 20` Moves the trigger point to 20 pixels down from the top of the viewport.\n\n##### Pixel value\n`offset: '-20px'` Moves the trigger point 20 pixels up from the top of the viewport.\n\n##### Percentage of the viewport height\n`offset: '20%'` Moves the trigger point down with 20% of the viewport height.\n\n##### Function\n`offset: (element) =\u003e window.innerHeight - element.offsetHeight` Triggers when the bottom of the element enters or leaves the viewport (by subtracting the element height from the viewport height).\n\n### Direction\nIf you want to restrict the callback to one direction, use the `direction` parameter with a value of `'up'` or `'down'`.\n\n```js\nScrollmarks.add({\n\telement: document.querySelector('.my-element'),\n\tdirection: 'up',\n\tcallback: () =\u003e {} // only called when scrolling up\n});\n```\n\n## Advanced configuration\n\nScrollmarks' performance can be configured to fit the requirements of your application. See [`Scrollmarks.config()`](#scrollmarksconfigparameters)\n\n\n## API\n\n### Scrollmarks.add({parameters})\nAdds a new scrollmark and starts watching. Returns an id that can be used to refresh or remove the mark.\n\n```js\nconst markId = Scrollmarks.add({\n\telement: document.querySelector('.contact-form'),\n\tcallback: () =\u003e alert('Scrolled down to the contact form!'),\n\toffset: '100%'\n\tdirection: 'down',\n\tonce: true,\n\tdebug: true\n});\n// returns 4\n```\n\n#### Parameters:\n\n##### `element` (HTMLElement, required)\nThe HTML element to watch.\n\n##### `callback` (Function, required)\nThe function that is called when the top of the element reaches the top of the viewport.\n\nTwo parameters are passed to the function: the scroll direction ('up' or 'down') and the scrollmark object.\n\n##### `offset` (number, string, or function)\nMoves the trigger point from the top of the viewport. The offset can be a number (`20`), pixels (`'20px'`), a percentage of the viewport height (`'20%'`), or a function that returns a number. A positive offset moves the trigger point down, a negative up.\n\n##### `direction` ('up' or 'down')\nIf set, the callback will only be executed when the page is scrolled in the given direction.\n\n##### `once` (boolean)\nIf set, the callback will be executed at most once.\n\n##### `debug` (boolean)\nShows the calculated trigger point on the page.\n\n\n### Scrollmarks.remove(id)\n\nRemoves the scrollmark with the given id. If there are no marks left, stops watching. Returns `true` if the mark was found and removed, `false` if it didn't exist in the first place.\n\n```js\nScrollmarks.remove(markId);\n```\n\n#### Parameter:\n\n##### `id` (number)\nThe id of the mark.\n\n\n### Scrollmarks.refresh(id)\n\nIf an element's position has changed you might need to refresh its mark.\n\n```js\nScrollmarks.refresh(markId);\n```\n\nCalling refresh without an id refreshes all marks.\n\n```js\nScrollmarks.refresh();\n```\n\n\u003e Marks are refreshed when the height of the page changes (because elements were added, removed or modified). You should only resort to manual refresh in a few cases e.g. when an absolute positioned element moves around the page.\n\n#### Parameter:\n\n##### `id` (number)\nThe id of the mark.\n\n\n\n### Scrollmarks.stop()\nStops watching. No callbacks will be triggered.\n\n```js\nScrollmarks.stop();\n```\n\n### Scrollmarks.start()\nStarts watching. All callbacks will be triggered.\n\n```js\nScrollmarks.start();\n```\n\n### Scrollmarks.config({parameters})\n\nSets or gets configuration parameters. When called with a parameters object sets the configuration. Returns the configuration when called without parameters.\n\n```js\nScrollmarks.config({\n\tscrollThrottle: 60,\n\tresizeThrottle: 300,\n\tidleTimeout: 100\n});\n\nScrollmarks.config(); // returns the configuration\n```\n\n#### Parameters:\n\n##### `scrollThrottle` (number)\nSets the number of frames between checking the scroll position of the page. The default value is 10, so six checks will be performed every second on most devices.\n\nLower values provide more precision but may cause performance issues on some pages.\n\n##### `resizeThrottle` (number)\nSets the number of frames between checking the size of the page. The default value is 30, so two checks will be performed every second on most devices.\n\nLower values provide more precision but may cause performance issues on some pages.\n\n##### `idleTimeout` (number)\nSets the maximum delay of refresh calls in milliseconds. The default value is 100.\n\nA higher value can increase performance on pages that have a lot going on. Setting `idleTimeout` to 0 provides instant refresh.\n\n\u003e This parameter only affects [browsers that support `requestIdleCallback`](https://caniuse.com/requestidlecallback) . Older browsers will always use a zero timeout to defer refresh.\n\n## License\n\nMIT License","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamonserrano%2Fscrollmarks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjamonserrano%2Fscrollmarks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamonserrano%2Fscrollmarks/lists"}