{"id":17750572,"url":"https://github.com/nuintun/viewport","last_synced_at":"2025-04-01T09:39:26.966Z","repository":{"id":151211572,"uuid":"63843401","full_name":"nuintun/viewport","owner":"nuintun","description":"A library for get a callback when any element becomes visible in a viewport (window or custom viewport)","archived":false,"fork":false,"pushed_at":"2018-02-28T06:56:08.000Z","size":1139,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2023-04-05T13:38:14.299Z","etag":null,"topics":["scrollview","viewchange","viewport"],"latest_commit_sha":null,"homepage":"https://nuintun.github.io/viewport","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/nuintun.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":"2016-07-21T06:34:54.000Z","updated_at":"2017-02-16T06:51:02.000Z","dependencies_parsed_at":"2023-04-29T05:04:23.475Z","dependency_job_id":null,"html_url":"https://github.com/nuintun/viewport","commit_stats":null,"previous_names":[],"tags_count":0,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuintun%2Fviewport","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuintun%2Fviewport/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuintun%2Fviewport/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuintun%2Fviewport/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nuintun","download_url":"https://codeload.github.com/nuintun/viewport/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246620163,"owners_count":20806716,"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":["scrollview","viewchange","viewport"],"created_at":"2024-10-26T12:22:40.759Z","updated_at":"2025-04-01T09:39:26.948Z","avatar_url":"https://github.com/nuintun.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# viewport\n\n\u003e A library for get a callback when any element becomes visible in a viewport (window or custom viewport)\n\u003e\n\u003e [![Dependencies][david-image]][david-url]\n\n## Introduction\n\n```js\n// image lazy load\n$(function() {\n  var viewport = new Viewport(window, {\n    delay: 150,\n    threshold: 0,\n    skipHidden: true,\n    thresholdBorderReaching: 0,\n    target: 'img[data-src]'\n  });\n\n  viewport.on('viewchange', function(e) {\n    $.each(e.target, function(i, image) {\n      image = $(image);\n\n      var src = image.attr('data-src');\n\n      if (!src) return;\n\n      image.removeAttr('data-src');\n      image.addClass('ui-loading');\n\n      $('\u003cimg /\u003e')\n        .on('load error', { image: image, src: src }, function(event) {\n          var image = event.data.image;\n          var src = event.data.src;\n\n          image\n            .hide()\n            .removeClass('ui-loading')\n            .attr('src', src)\n            .fadeIn('fast');\n        })\n        .attr('src', src);\n    });\n  });\n});\n```\n\n## API\n\n### Viewport(viewport[, options])\n\n###### viewport - `HTMLElement|window`\n\n\u003e The viewport element\n\n###### options\n\n* _target_ - `String|jQueryElement|HTMLElement`\n\n  \u003e The elements want to be watched in viewport\n\n* _threshold_ - `Number|Array`\n\n  \u003e With this value you can increase or decrease the threshold range viewport detection\n  \u003e The value will parsed like css margin and padding\n\n* _skipHidden_ - `Boolean`\n\n  \u003e Skip hidden element in target\n\n* _delay_ - `Number`\n\n  \u003e The delay of viewchange event emit frequency\n\n* _thresholdBorderReaching_ - `Number`\n  \u003e With this value you can increase or decrease the threshold range viewport border reaching detection\n  \u003e The value will parsed like css margin and padding but only accept positive number\n\n### Method\n\n###### on\n\n\u003e Add a event listener\n\n###### off\n\n\u003e Remove a event listener\n\n###### emit(event[, data])\n\n\u003e Trigger a event\n\n###### refresh([options])\n\n\u003e Refresh viewport\n\n###### destroy()\n\n\u003e Destroy viewport\n\n### Event\n\n###### viewchange\n\n\u003e When viewport on scroll and resize, it will emit viewchange event\n\n### Event Data\n\n* _type_\n\n  \u003e Event type, always `viewchange`\n\n* _emitter_\n\n  \u003e The emitter of triggered viewchange, maybe `init|refresh|scroll|resize`\n\n* _target_\n\n  \u003e The element appear into viewport now\n\n* _offsetX_\n\n  \u003e The scrollbar offset x\n\n* _offsetY_\n\n  \u003e The scrollbar offset y\n\n* _scrollTop_\n\n  \u003e The scrollbar scroll top\n\n* _scrollLeft_\n\n  \u003e The scrollbar scroll left\n\n* _viewport_\n\n  \u003e The viewport size [width, height, scrollWidth, scrollHeight]\n\n* _top_\n\n  \u003e Is scrollbar reached viewport top\n\n* _right_\n\n  \u003e Is scrollbar reached viewport right\n\n* _bottom_\n\n  \u003e Is scrollbar reached viewport bottom\n\n* _left_\n  \u003e Is scrollbar reached viewport left\n\n## Demo\n\n#### [Viewport scroll spy and viewport image lazyload](https://nuintun.github.io/viewport/examples/index.html)\n\n[david-image]: https://img.shields.io/david/dev/nuintun/viewport.svg?style=flat-square\n[david-url]: https://david-dm.org/nuintun/viewport?type=dev\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuintun%2Fviewport","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnuintun%2Fviewport","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuintun%2Fviewport/lists"}