{"id":21721646,"url":"https://github.com/polydile/dile-smooth-scroll","last_synced_at":"2025-10-07T11:30:42.743Z","repository":{"id":35012349,"uuid":"196441686","full_name":"Polydile/dile-smooth-scroll","owner":"Polydile","description":"Web Component \u0026 Mixin to create smooth scroll into elements. Based on LitElement.","archived":false,"fork":false,"pushed_at":"2023-01-04T04:26:14.000Z","size":2309,"stargazers_count":2,"open_issues_count":21,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-26T05:14:49.913Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/Polydile.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-07-11T17:52:06.000Z","updated_at":"2020-07-10T21:59:06.000Z","dependencies_parsed_at":"2023-01-15T11:59:32.473Z","dependency_job_id":null,"html_url":"https://github.com/Polydile/dile-smooth-scroll","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polydile%2Fdile-smooth-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polydile%2Fdile-smooth-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polydile%2Fdile-smooth-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polydile%2Fdile-smooth-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Polydile","download_url":"https://codeload.github.com/Polydile/dile-smooth-scroll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235621552,"owners_count":19019519,"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":[],"created_at":"2024-11-26T02:18:15.453Z","updated_at":"2025-10-07T11:30:42.738Z","avatar_url":"https://github.com/Polydile.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Moved\n\n**This package has moved** and is now available at [Dile Components](https://dile-components.com/). Please update your dependencies. This repository is no longer maintained. \n\n# \\\u003cdile-smooth-scroll\u003e\n\nWeb Component to create smooth scrolls on the page document or in a element scrolling section. Based on LitElement.\n\nAlso this package provides a mixin to implement scrollin API functions to any component you need.\n\nGo to [DEMOS page](https://dile-smooth-scroll.polydile.com)!\n\n## Installation\n```bash\nnpm i dile-smooth-scroll\n```\n\n## Usage\n```html\n\u003cscript type=\"module\"\u003e\n  import 'dile-smooth-scroll/dile-smooth-scroll.js';\n\u003c/script\u003e\n\n\u003cdile-smooth-scroll id=\"scrollComponent\"\u003e\u003c/dile-smooth-scroll\u003e\n```\n\nThis component is not representational, actually provides a simple scroll API. So, you can call it's methods to create smooth scrolls in various ways.\n\nFor example:\n\n```javascript\n  // This method do a smooth scroll to the bottom of the document.\n  document.getElementById('scrollComponent').smoothScrollToBottom();\n\n  // This method do a smooth scroll to the top of the document.\n  document.getElementById('scrollComponent').smoothScrollToTop();\n```\n\nIs important to note that the component uses the Javascript native scroll API. If you need to run this component in browsers that do not support it, you will need to use a polyfill. Please find the [compatibility of the scroll API in Caniuse](https://caniuse.com/#feat=element-scroll-methods).\n\n## API methods\n\n- **smoothScrollToTop()**: Scrolls the entire document to the top.\n- **smoothScrollToBottom()**: Scrolls the entire document to the bottom.\n- **smoothScroll(top, left)**: Scrolls the entire document to top \u0026 left position.\n- **smoothScrollBy(top, left)**: Scrolls the entire document by top \u0026 left values.\n- **smoothScrollElementIntoView(element)**: Scrolls the entire document to the position of the element passed by argument.\n- **smoothElementScrollTop(element)**: Scrolls a section with it's own scrolling area to the top.\n- **smoothElementScrollBottom(element)**: Scrolls a section with it's own scrolling area to the bottom.\n- **smoothElementScroll(element, top, left)**: Scrolls a section with it's own scrolling area to the top \u0026 left position.\n- **smoothElementScrollBy(element, top, left)**: Scrolls a section with it's own scrolling area by top \u0026 left values.\n\n## properties\n\n- **scrollToElementOnInit**: when the scrollToElementOnInit property is set with an element ID, during the initialization progress of the component the page will scroll to the position of the element ID configured.\n\n# Mixins\n\nIn this package you will find mixins to implement the scrolling API into any component. We separate the scrolling API into two mixins because usually you need only one or other.\n\n## DileSmoothScrollMixin\n\nThis Mixin includes all methods related to scroll the entire document area. These are:\n\n- smoothScrollToTop\n- smoothScrollToBottom\n- smoothScroll\n- smoothScrollBy\n- smoothScrollElementIntoView\n\nTo use the mixin in a Web Component you can use a code like this:\n\n```javascript\nimport { DileSmoothScrollMixin } from 'dile-smooth-scroll/DileSmoothScrollMixin';\n\nclass MyOwnComponent extends DileSmoothScrollMixin(LitElement) {\n  // code of your own component\n}\n```\n\n## DileSmoothScrollElementMixin\n\nThis mixin implements the methods to scroll the content of a element with it's own scrolling section.\n\nThe methods included in it are:\n\n- smoothElementScrollTop\n- smoothElementScrollBottom\n- smoothElementScroll\n- smoothElementScrollBy\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolydile%2Fdile-smooth-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpolydile%2Fdile-smooth-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolydile%2Fdile-smooth-scroll/lists"}