{"id":21891400,"url":"https://github.com/pitpik/scrollhandler","last_synced_at":"2025-10-18T04:13:17.909Z","repository":{"id":141376237,"uuid":"47506766","full_name":"PitPik/scrollHandler","owner":"PitPik","description":"High Performance javaScript Scroll Handler for lazy load images, parallax, scroll into view etc. ","archived":false,"fork":false,"pushed_at":"2018-01-26T14:15:25.000Z","size":34,"stargazers_count":18,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-15T14:11:48.061Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://www.dematte.at/scrollHandler/","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/PitPik.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2015-12-06T17:40:18.000Z","updated_at":"2023-07-31T04:47:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"158b8502-b6bf-48e7-bc90-c4a9434d86dc","html_url":"https://github.com/PitPik/scrollHandler","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/PitPik/scrollHandler","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PitPik%2FscrollHandler","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PitPik%2FscrollHandler/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PitPik%2FscrollHandler/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PitPik%2FscrollHandler/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PitPik","download_url":"https://codeload.github.com/PitPik/scrollHandler/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PitPik%2FscrollHandler/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279464321,"owners_count":26174791,"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","status":"online","status_checked_at":"2025-10-18T02:00:06.492Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-11-28T12:35:18.840Z","updated_at":"2025-10-18T04:13:17.874Z","avatar_url":"https://github.com/PitPik.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# High Performance Scroll Handler\n\nAdding event handlers to the window scroll event is generally not such a good idea. Well, sometimes we do need it for things like lazy loading of images, parallax effects, scroll into view and show, etc. So, if we do, we should use it carefully and smart.\n\nThis scroll handler (minified 3.75 KB / 1.43 KB gZip) gives you\n - smart throttling of event storm\n - caching elements, data, position and states for blasting fast calculations\n - element manipulation only if situation changed (in view port, out of view port)\n - requestAnimationFrame support; can be turned off if needed (for event handling in callbacks)\n - automatically skips manipulation of containers that are not in view port\n - one single element manipulation per cycle if needed at all (minimum DOM-api access)\n - detects changes in view port for re-calculation of container positions\n - possible callbacks for 'per cycle' calculations / manipulations\n - automatically adds containers if added to the DOM\n\nIn the [demo](http://dematte.at/scrollHandler) you can see how to make smooth parallax effects with almost no JS effort and very little DOM tree access. You'll also see that, for example in the paralaxCallback function, we set the ```translateY``` value every 100ms (time is set by option) and use css's ```transition: transform .1s ease-out;``` to make it a smooth animation. This way the browser has to do all the animations and that's way faster then doing it in javaScript. The fact that MS stopped supporting IE8, 9, 10, so we now can use transitions, makes this a future-oriented technique for fast and smooth scrolling effects.\n\n## Usage\n\nInitialize IsInViewport like:\n```javascript\nvar myScroll = new IsInViewport();\n```\n\nif you'd like to overwrite some default options then send them with it:\n```javascript\nvar myScroll = new IsInViewport({\n        scrollElement: window, // the element the scrollHandler should listen to and calculations are done\n        dataAttribute: 'data-inview', // name of data attribute (with options)\n        className: 'inview', // class name given if in view (+ additional)\n        offsetTop: 0, // top offset when scroll handler should trigger (negative possible)\n        offsetBottom: 0, // same as above just with bottom\n        delay: 100, // throttling of events (events happen by default every ~16ms)\n        watchTimer: 100, // time in ms how often script should look for DOM change (0 = disabled)\n        requestAnimationFrame: true, // switch for requestAnimationFrame; disable to avoid unecpected delays for events\n        callback: {'myCallbackName': function() {}, ...} // callback for every cycle; default is none (only provision)\n    });\n```\n\nIn your HTML you might have containers you'd like to watch while scrolling that then look like the following:\n```HTML\n\u003cdiv class=\"some-class\" data-inview\u003e...\u003c/div\u003e\n\u003cdiv class=\"some-class\" data-inview=\"{'stayInView': true, 'callback': 'paralaxCallback'}\"\u003e...\u003c/div\u003e\n```\n\nAs you can see, with the second container we set some more individual options. They are the same kind as those above, it just overwrites the global ones for this item. ```callback``` ```stayInView``` are the only exceptions:\n * The global ```callback``` doesn't fire by default, only if it's explicitly set in the data attribute.\n * ```stayInView``` means that the default class name given if this container was in your view port already will stay, even if it scrolls out of the view port.\n\nNow, if your containers get scrolled into view, they automatically get some class names: ```inview``` (as set in options), ```inview-top```, ```inview-bottom```, ```inview-completely```. In your css you now can make your styling, even transitions (maybe use :not()) and use the callback for some extra stuff you want to do (like lazy load images, ...). Be aware that you can only use one ```callback``` per element (container data attribute). If you need to call more then one then call others from within this single callback function.\n\n**NOTE**: ```IsInViewport``` works best if used as a singleton. If you need to install more than one, then make sure that the option ```dataAttribute: 'data-inview'```is named differently (for example ```data-inview2```), otherwise both instances work on the same elements multiple times.\n\n## API\n\nThe following properties can be found when inspecting the instance. This will also be delivered in callback functions as ```this``` besides ```container``` (see below).\n```HTML\nmyScroll:\n    callbacks: Object // with name of callback as key\n    container: Array // all the registered containers\n    elements: NodeList // cache for internal use\n    options: \n        className: \"inview\" // className and prefix for classNames\n        dataAttribute: \"data-inview\" // data attribute to look for container options\n        delay: 100 // skips scroll events and calculates every x ms instead\n        offsetBottom: 0 // action offset (like a delay for actions to take place)\n        offsetTop: 0 // as above\n        watchTimer: 100 // looks for resize / orientation change every x ms; is optimized\n        requestAnimationFrame: true // use requestAnimationFrame or just timeout\n    scrollBottom: 1000 // srollTop + screehnHeight\n    scrollTop: 0,\n    speed: 0, // last mesured speed\n    __proto__:\n        addCallback: (callback) // {'myCallback': function(){}}\n        initContainers: (force) // force triggers new calculations and new collection\n        removeCallback: (callbackName) // 'myCallback'\n```\n\nThe callback delivers some information of the current container (besides the instance itself with ```this```):\n```HTML\ncontainer:\n    bottom: 448 // bottom of container (relative to document)\n    bottomInViewport: true\n    completelyInViewport: false\n    deltaBottom: 448 // different from bottom if options.offsetBottom\n    deltaTop: 100 // see above\n    element: div.some-class\n    height: 348 // of container\n    inViewport: true\n    left: 100 // relative to document\n    options: Object\n        callback: ...\n        className: \"inview\"\n        classNameBottom: \"inview-bottom\"\n        classNameCompletely: \"inview-completely\"\n        classNameTop: \"inview-top\"\n        initialClassName: false\n        offsetBottom: 0\n        offsetTop: 0\n        stayInView: false\n    top: 100 // relative to document\n    topInViewport: false\n    wasInViewport: true\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpitpik%2Fscrollhandler","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpitpik%2Fscrollhandler","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpitpik%2Fscrollhandler/lists"}