├── .npmrc ├── .prettierignore ├── static └── favicon.png ├── src ├── index.test.ts ├── lib │ ├── index.js │ ├── index.ts │ ├── utils │ │ ├── isHex.ts │ │ └── isRGBA.ts │ ├── Arrow.svelte │ ├── ScrollableArrowItem.svelte │ └── ScrollableArrow.svelte ├── app.d.ts ├── app.html └── routes │ └── +page.svelte ├── .gitignore ├── .eslintignore ├── .prettierrc ├── tests └── test.ts ├── vite.config.ts ├── playwright.config.ts ├── tsconfig.json ├── .eslintrc.cjs ├── svelte.config.js ├── License ├── CHANGELOG.md ├── package.json └── README.md /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # Ignore files for PNPM, NPM and YARN 2 | pnpm-lock.yaml 3 | package-lock.json 4 | yarn.lock 5 | -------------------------------------------------------------------------------- /static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thingsneverchange/svelte-scrollable-arrow/HEAD/static/favicon.png -------------------------------------------------------------------------------- /src/index.test.ts: -------------------------------------------------------------------------------- 1 | import { describe, it, expect } from 'vitest'; 2 | 3 | describe('sum test', () => { 4 | it('adds 1 + 2 to equal 3', () => { 5 | expect(1 + 2).toBe(3); 6 | }); 7 | }); 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /dist 5 | /.svelte-kit 6 | /package 7 | .env 8 | .env.* 9 | !.env.example 10 | vite.config.js.timestamp-* 11 | vite.config.ts.timestamp-* 12 | -------------------------------------------------------------------------------- /src/lib/index.js: -------------------------------------------------------------------------------- 1 | import ScrollableArrow from '$lib/ScrollableArrow.svelte'; 2 | import ScrollableArrowItem from '$lib/ScrollableArrowItem.svelte'; 3 | 4 | export { ScrollableArrow, ScrollableArrowItem }; 5 | -------------------------------------------------------------------------------- /src/lib/index.ts: -------------------------------------------------------------------------------- 1 | import ScrollableArrow from '$lib/ScrollableArrow.svelte'; 2 | import ScrollableArrowItem from '$lib/ScrollableArrowItem.svelte'; 3 | 4 | export { ScrollableArrow, ScrollableArrowItem }; 5 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | 10 | # Ignore files for PNPM, NPM and YARN 11 | pnpm-lock.yaml 12 | package-lock.json 13 | yarn.lock 14 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": true, 3 | "singleQuote": true, 4 | "trailingComma": "none", 5 | "printWidth": 100, 6 | "plugins": ["prettier-plugin-svelte"], 7 | "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] 8 | } 9 | -------------------------------------------------------------------------------- /tests/test.ts: -------------------------------------------------------------------------------- 1 | import { expect, test } from '@playwright/test'; 2 | 3 | test('index page has expected h1', async ({ page }) => { 4 | await page.goto('/'); 5 | await expect(page.getByRole('heading', { name: 'Welcome to SvelteKit' })).toBeVisible(); 6 | }); 7 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { sveltekit } from '@sveltejs/kit/vite'; 2 | import { defineConfig } from 'vitest/config'; 3 | 4 | export default defineConfig({ 5 | plugins: [sveltekit()], 6 | test: { 7 | include: ['src/**/*.{test,spec}.{js,ts}'] 8 | } 9 | }); 10 | -------------------------------------------------------------------------------- /playwright.config.ts: -------------------------------------------------------------------------------- 1 | import type { PlaywrightTestConfig } from '@playwright/test'; 2 | 3 | const config: PlaywrightTestConfig = { 4 | webServer: { 5 | command: 'npm run build && npm run preview', 6 | port: 4173 7 | }, 8 | testDir: 'tests', 9 | testMatch: /(.+\.)?(test|spec)\.[jt]s/ 10 | }; 11 | 12 | export default config; 13 | -------------------------------------------------------------------------------- /src/lib/utils/isHex.ts: -------------------------------------------------------------------------------- 1 | const isHex = (str: string): boolean => { 2 | // Regular expression to match the pattern of a hexadecimal color code 3 | const hexColorPattern: RegExp = /^#(?:[0-9a-fA-F]{3}){1,2}$/; 4 | 5 | // Check if the string matches the pattern 6 | return hexColorPattern.test(str); 7 | }; 8 | 9 | export default isHex; 10 | -------------------------------------------------------------------------------- /src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://kit.svelte.dev/docs/types#app 2 | // for information about these interfaces 3 | 4 | declare global { 5 | namespace App { 6 | // interface Error {} 7 | // interface Locals {} 8 | // interface PageData {} 9 | // interface PageState {} 10 | // interface Platform {} 11 | } 12 | namespace ScrollView {} 13 | } 14 | 15 | export {}; 16 | -------------------------------------------------------------------------------- /src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | %sveltekit.head% 8 | 9 | 10 |
%sveltekit.body%
11 | 12 | 13 | -------------------------------------------------------------------------------- /src/lib/utils/isRGBA.ts: -------------------------------------------------------------------------------- 1 | const isRGBAColor = (str: string): boolean => { 2 | // Regular expression to match the pattern of an RGBA color code 3 | const rgbaColorPattern: RegExp = /^rgba?\(\s*(\d{1,3}\s*,\s*){3}(0(\.\d+)?|1(\.0+)?)\s*\)$/; 4 | 5 | // Check if the string matches the pattern 6 | return rgbaColorPattern.test(str); 7 | }; 8 | 9 | export default isRGBAColor; 10 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "resolveJsonModule": true, 9 | "skipLibCheck": true, 10 | "sourceMap": true, 11 | "strict": true, 12 | "module": "NodeNext", 13 | "moduleResolution": "NodeNext" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | /** @type { import("eslint").Linter.Config } */ 2 | module.exports = { 3 | root: true, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:@typescript-eslint/recommended', 7 | 'plugin:svelte/recommended', 8 | 'prettier' 9 | ], 10 | parser: '@typescript-eslint/parser', 11 | plugins: ['@typescript-eslint'], 12 | parserOptions: { 13 | sourceType: 'module', 14 | ecmaVersion: 2020, 15 | extraFileExtensions: ['.svelte'] 16 | }, 17 | env: { 18 | browser: true, 19 | es2017: true, 20 | node: true 21 | }, 22 | overrides: [ 23 | { 24 | files: ['*.svelte'], 25 | parser: 'svelte-eslint-parser', 26 | parserOptions: { 27 | parser: '@typescript-eslint/parser' 28 | } 29 | } 30 | ] 31 | }; 32 | -------------------------------------------------------------------------------- /svelte.config.js: -------------------------------------------------------------------------------- 1 | import adapter from '@sveltejs/adapter-auto'; 2 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; 3 | 4 | /** @type {import('@sveltejs/kit').Config} */ 5 | const config = { 6 | // Consult https://kit.svelte.dev/docs/integrations#preprocessors 7 | // for more information about preprocessors 8 | preprocess: vitePreprocess(), 9 | 10 | kit: { 11 | // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. 12 | // If your environment is not supported or you settled on a specific environment, switch out the adapter. 13 | // See https://kit.svelte.dev/docs/adapters for more information about adapters. 14 | adapter: adapter() 15 | } 16 | }; 17 | 18 | export default config; 19 | -------------------------------------------------------------------------------- /src/lib/Arrow.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 22 | 23 | 37 | -------------------------------------------------------------------------------- /License: -------------------------------------------------------------------------------- 1 | The Lil License v1 2 | 3 | Copyright (c) 2024 Themecloset [themecloset.com] 4 | 5 | Permission is hereby granted by the authors of this software, to any person, 6 | to use the software for any purpose, free of charge, including the rights 7 | to run, read, copy, change, distribute and sell it, and including usage rights 8 | to any patents the authors may hold on it, subject to the following conditions: 9 | 10 | This license, or a link to its text, must be included with all copies of 11 | the software and any derivative works. 12 | 13 | Any modification to the software submitted to the authors may be incorporated 14 | into the software under the terms of this license. 15 | 16 | The software is provided "as is", without warranty of any kind, including 17 | but not limited to the warranties of title, fitness, merchantability and 18 | non-infringement. The authors have no obligation to provide support or updates 19 | for the software, and may not be held liable for any damages, claims or other 20 | liability arising from its use. 21 | -------------------------------------------------------------------------------- /src/routes/+page.svelte: -------------------------------------------------------------------------------- 1 | 14 | 15 | { 17 | console.log('d'); 18 | }} 19 | on:dragEnd={() => { 20 | console.log('d'); 21 | }} 22 | arrowPosition="outside-top-right" 23 | > 24 | {#each images as item} 25 | 26 |
28 | 29 | 30 | {/each} 31 | 32 | 33 | 41 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## 1.3.2 2 | 3 | 1. Improvement to `drag event` 4 | 5 | ## 1.3.0 6 | 7 | 1. Stylesheet importing issue fixed 8 | 9 | ## 1.2.8 10 | 11 | 1. Fixed the bug where the link in the item didn't work. 12 | 2. Moved the style tag into a file. 13 | 3. Type check. 14 | 15 | ## 1.2.6 16 | 17 | 1. Changed the default arrow threshold to `window.innerWidth - 50` for narrow screens. 18 | 2. Added an explanation about the `Smooth Scrolling` option on Firefox. 19 | 20 | ## 1.2.4 21 | 22 | 1. Added a measurement to remove the content highlight (user select). 23 | 2. Added a measurement for the image and link ghosting on drag. To fix this, we moved the `drag` event inside the `mouse` event. `dragStart` and `dragEnd` still work the same. 24 | 3. Changed the `reachedEnd` threshold to 30ms 25 | 4. Bug where the scroll event hang leaving 100~200px left has been fixed. 26 | 27 | ## 1.2.0 28 | 29 | 1. Dispatch `dragStart` and `dragEnd` (mobile/desktop) 30 | 2. Added `reachedNearEnd` that fires when there's only one arrow to go. 31 | 3. Added `load` that fires when the component is mounted. 32 | 4. Fixed bug where the scrollbar appears on Firefox, Safari & Mobile Safari. 33 | 5. Changed the default scroll threshold to `1/2` from `1/3` on smaller devices. 34 | 35 | ## 1.1.4 36 | 37 | 1. Drag direction was set backwards. 38 | 39 | ## 1.1.3 40 | 41 | 1. `.scroll_view_shadow` class was mistakenly attached to container when it should be attahced to the arrow. 42 | 2. ID was not setting as `id == "" ? id : ""` should be `id != "" ? id : ""`. 43 | 3. Fixed the issue where the arrow gets triggered by a keyboard after a click on it. 44 | 45 | ## 1.1.0 46 | 47 | 1. ID was visible even when there's no value set up. 48 | 2. Added a new `drag event` for the desktop. 49 | 3. Added props for `___scrollTo` `(value: number, props?: { behavior: 'auto' | 'smooth' }) => void` 50 | 4. Changed arrow positions from `20px` to `15px` for each. 51 | 5. Fixed the remaining shadow block issue when the shadow is disabled. 52 | 6. Added `.scroll_view_shadow` to the container when `arrowShadow` is enabled. 53 | -------------------------------------------------------------------------------- /src/lib/ScrollableArrowItem.svelte: -------------------------------------------------------------------------------- 1 | 61 | 62 |
68 | 69 |
70 | 71 | 76 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-scrollable-arrow", 3 | "version": "1.3.4", 4 | "scripts": { 5 | "dev": "vite dev", 6 | "build": "vite build && npm run package", 7 | "preview": "vite preview", 8 | "package": "svelte-kit sync && svelte-package && publint", 9 | "prepublishOnly": "npm run package", 10 | "test": "npm run test:integration && npm run test:unit", 11 | "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", 12 | "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", 13 | "lint": "prettier --check . && eslint .", 14 | "format": "prettier --write .", 15 | "test:integration": "playwright test", 16 | "test:unit": "vitest" 17 | }, 18 | "license": { 19 | "type": "LIL", 20 | "url": "https://github.com/thingsneverchange/svelte-scrollable-arrow/blob/master/License" 21 | }, 22 | "repository": { 23 | "type": "git", 24 | "url": "https://github.com/thingsneverchange/svelte-scrollable-arrow" 25 | }, 26 | "exports": { 27 | ".": { 28 | "types": "./dist/index.d.ts", 29 | "svelte": "./dist/index.js" 30 | } 31 | }, 32 | "files": [ 33 | "dist", 34 | "!dist/**/*.test.*", 35 | "!dist/**/*.spec.*" 36 | ], 37 | "peerDependencies": { 38 | "svelte": "^4.0.0" 39 | }, 40 | "devDependencies": { 41 | "@playwright/test": "^1.28.1", 42 | "@sveltejs/adapter-auto": "^3.0.0", 43 | "@sveltejs/kit": "^2.0.0", 44 | "@sveltejs/package": "^2.0.0", 45 | "@sveltejs/vite-plugin-svelte": "^3.0.0", 46 | "@types/eslint": "^8.56.0", 47 | "@typescript-eslint/eslint-plugin": "^7.0.0", 48 | "@typescript-eslint/parser": "^7.0.0", 49 | "eslint": "^8.56.0", 50 | "eslint-config-prettier": "^9.1.0", 51 | "eslint-plugin-svelte": "^2.35.1", 52 | "prettier": "^3.1.1", 53 | "prettier-plugin-svelte": "^3.1.2", 54 | "publint": "^0.1.9", 55 | "svelte": "^4.2.7", 56 | "svelte-check": "^3.6.0", 57 | "tslib": "^2.4.1", 58 | "typescript": "^5.0.0", 59 | "vite": "^5.0.11", 60 | "vitest": "^1.2.0" 61 | }, 62 | "keywords": [ 63 | "svelte", 64 | "sveltekit", 65 | "svelte gallery", 66 | "svelte carousel", 67 | "svelte slider" 68 | ], 69 | "svelte": "./dist/index.js", 70 | "types": "./dist/index.d.ts", 71 | "type": "module" 72 | } 73 | -------------------------------------------------------------------------------- /src/lib/ScrollableArrow.svelte: -------------------------------------------------------------------------------- 1 | 288 | 289 |
{ 298 | __mouseOverListener(true); 299 | }} 300 | on:mouseleave={() => { 301 | __mouseOverListener(false); 302 | }} 303 | 304 | role="region" 305 | aria-label="Scroll View" 306 | aria-live="polite"> 307 | 308 |
309 | {#if _showLeft && arrow} 310 |
311 | 319 |
320 | {:else} 321 |
322 | {/if} 323 | {#if _showRight && arrow} 324 |
325 | 333 |
334 | {:else} 335 |
336 | {/if} 337 |
338 |
339 |
340 | 341 |
342 |
343 |
344 | 345 | 466 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | Svelte Scrollable Arrow 3 |

Svelte Scrollable Arrow

4 | 5 | version 6 | 7 | 8 | version 9 | 10 | 11 |
12 | 13 | Svelte Scrollable Arrow effortlessly creates a horizontal navigation with sleek arrows for contents that require responsiveness. It aims to keep every child element as it is while wrapping with a scrollable container and a navigation. 14 | 15 | ## Problem It Solves 16 | 17 | Images, menus, and buttons can get unmanageable, requiring one to write a separate grid, list, or menus for wider and smaller devices. It solves this issue. You can still stuff all the menus or images in one line by making them scrollable. 18 | 19 | ## Compatibility 20 | 21 | This component works seamlessly on any device, including mobile, tablet, or desktop. It efficiently handles various scroll triggers, thanks to its utilization of the [scroll event](https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event), 22 | 23 | - Mouse wheels ✨ 24 | - Keyboard arrow events ✨ (Only if mouse is over the container to prevent every instance from listening to this event) 25 | - Built-in arrows (←/→) ✨ 26 | - Touchevents ✨ 27 | - Version 1.1.0 now supports the drag event on Desktop. 28 | 29 | And of course, this component is type-safe. 30 | 31 | ## Use Cases 32 | 33 | Basically, everywhere. It works like SwiftUI's `ScrollView` except that it comes with an arrow navigation, which can be hidden with an option. Cards, images, menus, buttons, links, or even album covers and tags. For most cases, it just makes you forget how the web should be designed in terms of responsiveness. 34 | 35 | On the version [[1.2.0]](https://github.com/thingsneverchange/svelte-scrollable-arrow/blob/master/CHANGELOG.md#120), there was a new event added `reachNearEnd`. This opens the door for the horizontal endless scrolling. 36 | 37 | ## Demo 38 | 39 | Svelte Scrollable Arrow 40 | 41 | [Try on a website✨ (Click the search input)](https://themecloset.com 'Try on our website'). 42 | 43 | ## Mobile Preview 44 | 45 |
46 | Svelte Scrollable Arrow
47 | 48 | ## Responsive 49 | 50 | Automatically hides/shows arrows depending on the container size. 51 | 52 | 53 | ## Installation 54 | 55 | ```bash 56 | npm install svelte-scrollable-arrow 57 | ``` 58 | 59 | ```javascript 60 | import { ScrollableArrow, ScrollableArrowItem } from 'svelte-scrollable-arrow'; 61 | ``` 62 | 63 | ## Usage guide 64 | 65 | All you have to do is to wrap each of your images, buttons or texts with `` inside the `` container. Items can be multiple. You can use the loop `{#each}{/each}` block and it may be wise to assign a key for each item. 66 | 67 | ```html 68 | 71 | 72 | 73 | 74 |
75 | 76 |
77 | 78 | 79 |
80 | 81 |
82 | 83 | 84 |
85 | 86 |
87 | 88 | 89 |
90 | 91 |
92 | 93 | 94 | ``` 95 | 96 | ## Props for Container (ScrollableArrow) 97 | 98 | | Prop | Type | Default | Description | 99 | | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | 100 | | justifyContent | `"start"⎮"end"⎮"flex-start"⎮"flex-end"⎮"center"⎮"left"⎮"right"⎮"normal"⎮"space-between"⎮"space-around"⎮"space-evenly"⎮"stretch` | `"start"` | Basically the same as `justify-content`. Sets how the items are aligned horizontally. | 101 | | alignItems | `"normal"⎮ "flex-start"⎮"flex-end"⎮"center"⎮"start"⎮"end"⎮"self-start"⎮"self-end"⎮"baseline"⎮"first baseline"⎮"last baseline"⎮"stretch"⎮"safe"⎮"unsafe"` | `"center"` | Basically same as `align-items`. Sets how the items are aligned vertically. | 102 | | arrowShadow | `boolean` | `true` | Enables the shadow behind each arrow. If disabled, ShadowColor has no effect. | 103 | | arrowShadowColor | `string` | `"rgba(0,0,0,0.7)"` | Only accepts a RGBA color for the shadow behind each arrow. | 104 | | arrow | `boolean` | `true` | Show the arrow on and off | 105 | | arrowColor | `string` | `"#ffffff"` | Hex Color for the arrow | 106 | | arrowSize | `number` | `18` | Size of each arrow (px) | 107 | | arrowPosition | `"top" ⎮ "center" ⎮ "bottom" ⎮ "outside-top-left" ⎮ "outside-top-right" ⎮ "outside-top-center" ⎮ "outside-top-space-between" ` | `"center"` | The position for each arrow. | 108 | | threshold | `number` | `0` | The number of the scroll value required to move through container. If left unset, the default is set to 1/3 of the container's width. | 109 | | showArrowByDefault | `boolean` | `true` | Shows the `right arrow` button on load, and it remains if the container has overflowing contents, and gets removed if it doesn't. | 110 | | id | `string` | `""` | ID for container. | 111 | | class | `string` | `""` | Container classes | 112 | | style | `string` | `""` | Container styles | 113 | 114 | ## Props for Item (ScrollableArrow) 115 | 116 | | Prop | Type | Default | Description | 117 | | ----- | -------- | ------- | ---------------- | 118 | | id | `string` | `""` | ID for the item. | 119 | | class | `string` | `""` | Item classes | 120 | | style | `string` | `""` | Item styles | 121 | 122 | ## Event for Container (ScrollableArrow) 123 | 124 | | Prop | Type | Description | 125 | | -------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 126 | | load | `CustomEvent` | Fires when the component is mounted. | 127 | | scroll | `CustomEvent` | Fires when the scroll event in the container is fired. This also fires when a user scrolls through the container without clicking the arrow. (Keyboard arrows, touch gestures, and mouse wheels.) | 128 | | scrollStart | `CustomEvent` | Fires once when the scroll event is fired. This is different from `scroll` as `scroll` fires on scroll. | 129 | | scrollEnd | `CustomEvent` | Fires 30ms after the scroll event ends. | 130 | | reachedEnd | `CustomEvent` | Fires when the scroller reached at the end. | 131 | | reachedNearEnd | `CustomEvent` | Fires when there's only one arrow left to go. | 132 | | mouseenter | `CustomEvent` | Fires when the mouse enters the container | 133 | | mouseleave | `CustomEvent` | Fires when the mouse leaves the container | 134 | | dragStart | `CustomEvent` | Fires when `touchEvent` and `dragEvent` are triggered. | 135 | | dragEnd | `CustomEvent` | Fires when `touchEvent` and `dragEvent` ended. | 136 | | next | `CustomEvent` | Fires when the `next arrow` is fired. (Can be triggered with a keyboard arrow →.) | 137 | | prev | `CustomEvent` | Fires when the `prev arrow` is fired. (Can be triggered with a keyboard arrow ←.) | 138 | | nav | `CustomEvent` | Fires when either arrow is fired. (Can be triggered with keyboard arrows ←/→.) | 139 | 140 | ## Event for Item (ScrollableArrowItem) 141 | 142 | The event in `ScrollableArrowItem` is limited to two events `visible` and `invisible`. It doesn't handle any other event. You may consider adding the event to your item container, not this component. 143 | 144 | | Prop | Type | Description | 145 | | --------- | ------------- | ---------------------------------- | 146 | | visible | `CustomEvent` | Fires when the item is visible | 147 | | invisible | `CustomEvent` | Fires when the item is not visible | 148 | 149 | ### Note about the `showArrowByDefault` option. 150 | 151 | This option is enabled by default. If you see the `right arrow` button showing up and disappearing immediately after, it means there are not enough scrollable contents. As it relies on the `onMount` lifecycle, this flickering is inevitable. You can disable it (not completely, but only when there are not enough contents to scroll) with this option. The recommended way is to make it `true` for smaller window sizes such as mobile, or tablets, and `false` for the wider views such as desktop. 152 | 153 | ## Limitations & Things to do 154 | 155 | 1. The component does not support custom arrow images, even though you can change the color & size. 156 | 2. You should wrap each item by `` to make it work and be able to use the API of the component. 157 | 3. The layout may break if the items in the content don't have a fixed size (either width or height) 158 | 4. On Firefox, the `Smooth Scrolling` option may be turned off if you see the scrolling instantly move to another position. This can be fixed in `about:preferences`. On the `Browsers` tab, enable `Smooth Scrolling`. 159 | 5. We advise to refrain from using `window.location.href` or `goto` as this may be triggered while a user drags the scrollview container. 160 | 161 | ## Version Change LOG 162 | 163 | [[1.1.0]](https://github.com/thingsneverchange/svelte-scrollable-arrow/blob/master/CHANGELOG.md?plain=1#110) Moved to 1.1.0 as there was a new drag event added for desktop.
164 | [[1.2.0]](https://github.com/thingsneverchange/svelte-scrollable-arrow/blob/master/CHANGELOG.md#120) Added new events `dragEnd`, `dragStart`, `reachNearEnd`, `load`. Removed the scrollbar on Safari, Firefox, iPhone Safari, and Edge.
165 | [[1.2.4]](https://github.com/thingsneverchange/svelte-scrollable-arrow/blob/master/CHANGELOG.md#124) Ghosting issue has been resolved. Images, and links do not create ghosting anymore. See more details in `CHANGELOG.md`. New options for `arrowPositions` are added.
166 | [[1.2.8]](https://github.com/thingsneverchange/svelte-scrollable-arrow/blob/master/CHANGELOG.md#128) Change the bug where the link inside the item doesn't get triggered.
167 | [[1.3.2]](https://github.com/thingsneverchange/svelte-scrollable-arrow/blob/master/CHANGELOG.md#131) Improvement to `drag event` 168 | 169 | The new `outside-top-right` `arrowPosition` option on `v1.2.4` preview. (It comes with 4 new styles.) 👇 170 | 171 | Svelte Scrollable Arrow Preview 172 | 173 | ## License 174 | 175 | [LIL License](https://github.com/thingsneverchange/svelte-scrollable-arrow/blob/master/License). 176 | 177 | https://yongju.me 178 | --------------------------------------------------------------------------------