diff --git a/README.md b/README.md
index a73cba5..5414103 100644
--- a/README.md
+++ b/README.md
@@ -82,6 +82,13 @@ Use the `intersect-full` utility to trigger the event when when the element is f
```
+### Custom threshold
+If `intersect-half` or `intersect-full` don't fit your needs, you can set a custom threshold using Tailwind's arbitrary value syntax: `intersect-[]`, where `` is a number between `0` and `1`.
+```html
+
+```
+This triggers the event once 30% of the element is visible. Values outside the `0`–`1` range are clamped.
+
## Custom classes
If you want to define the intersection behavior in a custom class (e.g. with the @apply directive), add a `intersect` class to your HTML element.
```html
diff --git a/src/observer/index.js b/src/observer/index.js
index cf27bb2..44f5473 100644
--- a/src/observer/index.js
+++ b/src/observer/index.js
@@ -1,3 +1,10 @@
+const NAMED_THRESHOLDS = {
+ 'intersect-full': 0.99,
+ 'intersect-half': 0.5,
+}
+
+const ARBITRARY_REGEX = /(?:^|\s)intersect-\[([\d.]+)\]/
+
const Observer = {
start() {
if (document.readyState === 'loading') {
@@ -50,15 +57,22 @@ const Observer = {
})
},
+ /**
+ *
+ * @param {Element} element
+ * @returns {number}
+ */
_getThreshold(element) {
- if (element.classList.contains('intersect-full')) {
- return 0.99
+ for (const className in NAMED_THRESHOLDS) {
+ if (element.classList.contains(className))
+ return NAMED_THRESHOLDS[className]
}
-
- if (element.classList.contains('intersect-half')) {
- return 0.5
+ const match = element.className.match(ARBITRARY_REGEX)
+ if (match) {
+ const threshold = parseFloat(match[1])
+ if (!Number.isNaN(threshold))
+ return Math.min(Math.max(0, threshold), 1)
}
-
return 0
},