{"id":21400731,"url":"https://github.com/sempostma/feed-view","last_synced_at":"2026-04-11T08:03:31.255Z","repository":{"id":57234256,"uuid":"165328125","full_name":"sempostma/feed-view","owner":"sempostma","description":"feed-view provides chat like scroll behaviour. The element’s scroll, sticks to the bottom when new elements are added and doesn’t jump when new elements are added above the element’s scrolltop.","archived":false,"fork":false,"pushed_at":"2019-01-13T18:00:15.000Z","size":108,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-01-19T10:12:46.492Z","etag":null,"topics":["chat","feed","javascript","library","npm","scroll","webpack"],"latest_commit_sha":null,"homepage":"https://esstudio.site/feed-view","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/sempostma.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}},"created_at":"2019-01-12T00:09:52.000Z","updated_at":"2019-01-13T18:00:16.000Z","dependencies_parsed_at":"2022-09-05T18:02:07.776Z","dependency_job_id":null,"html_url":"https://github.com/sempostma/feed-view","commit_stats":null,"previous_names":["lestergallagher/feed-view"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sempostma/feed-view","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sempostma%2Ffeed-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sempostma%2Ffeed-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sempostma%2Ffeed-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sempostma%2Ffeed-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sempostma","download_url":"https://codeload.github.com/sempostma/feed-view/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sempostma%2Ffeed-view/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31673068,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-10T17:19:37.612Z","status":"online","status_checked_at":"2026-04-11T02:00:05.776Z","response_time":54,"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":["chat","feed","javascript","library","npm","scroll","webpack"],"created_at":"2024-11-22T15:23:58.667Z","updated_at":"2026-04-11T08:03:31.235Z","avatar_url":"https://github.com/sempostma.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# feed-view\n\nfeed-view provides chat like scroll behaviour. The element's scroll, sticks to the bottom when new elements are added and doesn't jump when new elements are added above the element's scrolltop.\n\n[![GitHub license](https://img.shields.io/github/license/LesterGallagher/feed-view.svg)](https://github.com/LesterGallagher/feed-view/blob/master/LICENSE)\n[![GitHub issues](https://img.shields.io/github/issues/LesterGallagher/feed-view.svg)](https://github.com/LesterGallagher/feed-view/issues)\n[![Twitter](https://img.shields.io/twitter/url/https/www.npmjs.com/package/feed-view.svg?style=social)](https://twitter.com/intent/tweet?text=Wow:\u0026url=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Ffeed-view)\n\nYou've created an chat an and you want to add simple chat like scroll behaviour:\n\n![Example chat view](./docs/chat.png)\n\nYou can use this simple 1kb module to manage scroll behaviour for you. This module works for any html container that receives new children dynamically. If the scrolled all the way to the bottom, the bottom will stick. When new elements are added on above the current scroll view, this module will maintain the right amount of scroll.\n\n## Installation\n\n### Node\n\n```bash\nnpm i -S feed-view\n```\n\n```javascript\nconst FeedView = require('feed-view');\n// or\nimport FeedView from 'feed-view'; // if you're using es6\n```\n\n### Browser\n\nCDN: https://cdn.jsdelivr.net/npm/feed-view/dist/feed-view.min.js\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/feed-view/dist/feed-view.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  // \"FeedView\" is now a global variable\n\u003c/script\u003e\n```\n\n## Usage\n\n```javascript\nvar container = document.querySelector('#container'); // the scrolling element\nvar feedView = new FeedView(container);\n\nconsole.log(view.container); // the scrolling element\nconsole.log(view.sticky); // is the scrolling element currently sticked to the bottom\n```\n\nEverytime you add an element or right after you've added multiple elements, \ncall \".update()\" on the feediew instance. This scrolls the scrolling element if nessecary\nand updates the state.\n\n```javascript\nsetTimeout(() =\u003e {\n  container.appendChild(document.createTextNode('Message 1'));\n  feedView.update();\n}, 1000);\n\nsetTimeout(() =\u003e {\n  container.appendChild(document.createTextNode('Message 2'));\ncontainer.appendChild(document.createTextNode('Message 3'));\n  feedView.update();\n}, 1000);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsempostma%2Ffeed-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsempostma%2Ffeed-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsempostma%2Ffeed-view/lists"}