feat: added detection buffer

limbo-works · Sep 27, 2024 · 9f1f285 · 9f1f285
1 parent e2f19b9
commit 9f1f285
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 65 deletions.
diff --git a/.github/workflows/release-please.yml b/.github/workflows/release-please.yml
@@ -1,40 +1,40 @@
 name: Release Please and Publish
 
 on:
-  push:
-    branches:
-      - main
+    push:
+        branches:
+            - main
 
 permissions:
-  contents: write
-  pull-requests: write
-  packages: write
+    contents: write
+    pull-requests: write
+    packages: write
 
 jobs:
-  release-please:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: google-github-actions/release-please-action@v4
-        id: release
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          release-type: node
+    release-please:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: google-github-actions/release-please-action@v4
+              id: release
+              with:
+                  token: ${{ secrets.GITHUB_TOKEN }}
+                  release-type: node
 
-      - uses: actions/checkout@v4
-        if: ${{ steps.release.outputs.release_created }}
+            - uses: actions/checkout@v4
+              if: ${{ steps.release.outputs.release_created }}
 
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          registry-url: https://npm.pkg.github.com/
-        if: ${{ steps.release.outputs.release_created }}
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: 20
+                  registry-url: https://npm.pkg.github.com/
+              if: ${{ steps.release.outputs.release_created }}
 
-      - run: yarn
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        if: ${{ steps.release.outputs.release_created }}
+            - run: yarn
+              env:
+                  NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+              if: ${{ steps.release.outputs.release_created }}
 
-      - run: yarn publish
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        if: ${{ steps.release.outputs.release_created }}
+            - run: yarn publish
+              env:
+                  NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+              if: ${{ steps.release.outputs.release_created }}
diff --git a/.playground/app.vue b/.playground/app.vue
@@ -1,7 +1,7 @@
 <template>
 	<div
 		id="__chokoladefabrikken"
-		style="width: 100vw; height: 50vh; overflow-y: auto;"
+		style="width: 100vw; height: 50vh; overflow-y: auto"
 	>
 		<!-- <CustomScrollbar
 			aria-controls="chokoladefabrikken"
@@ -10,16 +10,14 @@
 			aria-orientation="vertical"
 			:persistent="true"
 		/> -->
-		<div style="width:200vw;">
-
-		</div>
+		<div style="width: 120vw"></div>
 		<CustomScrollbar
 			ref="scrollbar"
 			aria-controls="__chokoladefabrikken"
 			class="scrollbarHorizontal"
 			handle-class="rebox"
 			aria-orientation="horizontal"
-			:persistent="true"
+			:detection-buffer="20"
 		>
 			<!-- <template #beforeRail="{ scrollBy, scrollToEnd, scrollToStart }"
 				><button @click="scrollToStart" class="btn">
@@ -65,8 +63,7 @@ const scrollbar = ref(null);
 
 onMounted(() => {
 	console.log(scrollbar.value);
-
-})
+});
 </script>
 
 <style>

diff --git a/.playground/nuxt.config.js b/.playground/nuxt.config.js
@@ -1,3 +1,3 @@
 export default defineNuxtConfig({
-  extends: '..'
-})
+	extends: '..',
+});
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,19 +2,17 @@
 
 ## [1.0.1](https://github.com/limbo-works/Limbo.Nuxt.CustomScrollbar/compare/v1.0.0...v1.0.1) (2024-07-08)
 
-
 ### Bug Fixes
 
-* scrollbars are presentational ([6ddc9e9](https://github.com/limbo-works/Limbo.Nuxt.CustomScrollbar/commit/6ddc9e99962220cd3cc336a2a2cd4487bf1b6ee4))
+-   scrollbars are presentational ([6ddc9e9](https://github.com/limbo-works/Limbo.Nuxt.CustomScrollbar/commit/6ddc9e99962220cd3cc336a2a2cd4487bf1b6ee4))
 
 ## [1.0.0](https://github.com/limbo-works/Limbo.Nuxt.CustomScrollbar/compare/0.1.1...v1.0.0) (2024-05-21)
 
-
 ### ⚠ BREAKING CHANGES
 
-* added release-please
+-   added release-please
 
 ### Features
 
-* added release-please ([d868d92](https://github.com/limbo-works/Limbo.Nuxt.CustomScrollbar/commit/d868d92b175c4bee5051cac4ca63670bab7ddd93))
-* aria labels on handles ([444c1ce](https://github.com/limbo-works/Limbo.Nuxt.CustomScrollbar/commit/444c1ce8af7ad2a35f86821fdc32dc227bf84a93))
+-   added release-please ([d868d92](https://github.com/limbo-works/Limbo.Nuxt.CustomScrollbar/commit/d868d92b175c4bee5051cac4ca63670bab7ddd93))
+-   aria labels on handles ([444c1ce](https://github.com/limbo-works/Limbo.Nuxt.CustomScrollbar/commit/444c1ce8af7ad2a35f86821fdc32dc227bf84a93))
diff --git a/README.md b/README.md
@@ -4,37 +4,37 @@ Creates a custom scrollbar intended for use in specific cases where it is needed
 
 ## Basic usage
 
-``` html
+```html
 <CustomScrollbar aria-controls="__nuxt" class="absolute h-full top-0 right-0" />
 ```
 
 ## Props overview
 
 #### CustomScrollbar's props overview
 
-| Prop | Description | Default value | Data type |
-| ---- | ----------- | ------------- | --------- |
-| persistent | Enables the scrollbar always, even though the target is not scrollable | false | Boolean |
-| ariaControls | Target element for scrolling. `"__nuxt"` is used for the whole page instead of individual elements. | null | String |
-| ariaValueNow | Sets the first column of the table as the table header. | 0 | [String,Number] |
-| ariaValuemin | Sets the minimum value of the scrollbar as aria property `aria-valuemin`. | 0 | [String,Number] |
-| ariaValuemax | Sets the maximum value of the scrollbar as aria property `aria-valuemin`. | 100 | [String,Number] |
-| ariaOrientation | Sets the orientation of the scrollbar as aria property `aria-orientation`. | 'vertical' | String |
-| handleAriaLabel | Sets the `aria-label` for the handle. | 'Scrollbar handle' | String |
-| handleStyle | For additional inline styling of the handle of the scrollbar. | null | [String,Object,Array] |
-| handleClass | For additional classes for the handle of the scrollbar. | null | [String,Object,Array] |
+| Prop            | Description                                                                                         | Default value      | Data type             |
+| --------------- | --------------------------------------------------------------------------------------------------- | ------------------ | --------------------- |
+| persistent      | Enables the scrollbar always, even though the target is not scrollable                              | false              | Boolean               |
+| ariaControls    | Target element for scrolling. `"__nuxt"` is used for the whole page instead of individual elements. | null               | String                |
+| ariaValueNow    | Sets the first column of the table as the table header.                                             | 0                  | [String,Number]       |
+| ariaValuemin    | Sets the minimum value of the scrollbar as aria property `aria-valuemin`.                           | 0                  | [String,Number]       |
+| ariaValuemax    | Sets the maximum value of the scrollbar as aria property `aria-valuemin`.                           | 100                | [String,Number]       |
+| ariaOrientation | Sets the orientation of the scrollbar as aria property `aria-orientation`.                          | 'vertical'         | String                |
+| handleAriaLabel | Sets the `aria-label` for the handle.                                                               | 'Scrollbar handle' | String                |
+| handleStyle     | For additional inline styling of the handle of the scrollbar.                                       | null               | [String,Object,Array] |
+| handleClass     | For additional classes for the handle of the scrollbar.                                             | null               | [String,Object,Array] |
 
 ## Available slots
 
-| Slot name | Description |
-| --------- | ----------- |
+| Slot name  | Description                                                                       |
+| ---------- | --------------------------------------------------------------------------------- |
 | beforeRail | Content placed before the rail, alike the arrows in the default chrome scrollbar. |
-| afterRail | Content placed after the rail, alike the arrows in the default chrome scrollbar. |
+| afterRail  | Content placed after the rail, alike the arrows in the default chrome scrollbar.  |
 
 ### Slot methods
 
-| Method | Description |
-| ------ | ----------- |
-| scrollBy | Adjusts the scrollbar's position by a specified number of pixels when given a parameter. Negative values scroll in the opposite direction |
-| scrollToStart | Scrolls the scrollbar's rail to the beginning of the scrollbar. |
-| scrollToEnd | Scrolls the scrollbar's rail to the end of the scrollbar. |
+| Method        | Description                                                                                                                               |
+| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| scrollBy      | Adjusts the scrollbar's position by a specified number of pixels when given a parameter. Negative values scroll in the opposite direction |
+| scrollToStart | Scrolls the scrollbar's rail to the beginning of the scrollbar.                                                                           |
+| scrollToEnd   | Scrolls the scrollbar's rail to the end of the scrollbar.                                                                                 |
diff --git a/components/CustomScrollbar.vue b/components/CustomScrollbar.vue
@@ -67,6 +67,10 @@ const props = defineProps({
 		default: 'vertical',
 		validator: (value) => ['vertical', 'horizontal'].includes(value),
 	},
+	detectionBuffer: {
+		type: Number,
+		default: 0,
+	},
 
 	// Styling
 	handleClass: [Object, Array, String],
@@ -86,7 +90,7 @@ const scrollbarData = ref({
 });
 const targetData = ref({
 	get canScroll() {
-		return this.innerSize > this.outerSize;
+		return this.innerSize > this.outerSize + props.detectionBuffer;
 	},
 	scrolledAmount: 0,
 	outerSize: 0,