diff --git a/README.md b/README.md
index 502f71b..548fd04 100644
--- a/README.md
+++ b/README.md
@@ -96,6 +96,10 @@ This action expects that a container has a fixed height and a direct child that
This is so simple that it doesn't need a NPM package. Just copy the file ``/src/kineticscroll.js`` to your project's appropriate folder and import it where needed. All other files are just there for the sake of the example.
+## Notes
+
+To avoid problems with underlying click events, this class temporarily suspends pointer events on the container element's children. This is done via the pointer-events CSS selector. You may experience some problems should you be manipulating this selector on your container's children and using this class at the same time. The class will do a pointer-events: 'none' when a drag has moved and a pointer-events: 'auto' at the mouseup event.
+
## Example
Download this code, extract it and run:
diff --git a/public/countries.js b/public/countries.js
index 8691b80..a299bec 100644
--- a/public/countries.js
+++ b/public/countries.js
@@ -183,7 +183,7 @@ const countries = [
{name: 'Reunion', code: 'RE'},
{name: 'Romania', code: 'RO'},
{name: 'Russian Federation', code: 'RU'},
- {name: 'RWANDA', code: 'RW'},
+ {name: 'Rwanda', code: 'RW'},
{name: 'Saint Helena', code: 'SH'},
{name: 'Saint Kitts and Nevis', code: 'KN'},
{name: 'Saint Lucia', code: 'LC'},
diff --git a/public/kineticscroll.js b/public/kineticscroll.js
index 9f89ed3..e069ef4 100644
--- a/public/kineticscroll.js
+++ b/public/kineticscroll.js
@@ -1,5 +1,5 @@
-// Svelte action to transform a container into a momentum scroller
+// Vanilla JS module and Svelte action to transform a container into a momentum scroller
// By Walter Staeblein - 2022
export function kineticscroll(node, cfgs) {
'use strict';
@@ -122,6 +122,7 @@ export function kineticscroll(node, cfgs) {
if (isWheel) { wheeling = true; } else { pressed = true; }
reference = ypos(e);
+ node.style.cursor = 'ns-resize';
velocity = amplitude = 0;
frame = offset;
timestamp = Date.now();
@@ -139,9 +140,11 @@ export function kineticscroll(node, cfgs) {
if (pressed) {
y = ypos(e);
delta = reference - y;
- if (delta > 2 || delta < -2) {
+ if (Math.abs(delta) > 5) {
reference = y;
scroll(offset + delta);
+
+ Array.from(node.children).forEach((ele) => { ele.style.pointerEvents = 'none' });
}
}
e.preventDefault();
@@ -150,10 +153,15 @@ export function kineticscroll(node, cfgs) {
}
function preRelease(e) {
+ e.stopPropagation();
+ e.preventDefault();
if (e.buttons == 1) { release(e); }
}
function release(e) {
+ e.stopPropagation();
+ e.preventDefault();
+
pressed = false;
wheeling = false;
clearInterval(ticker);
@@ -166,7 +174,10 @@ export function kineticscroll(node, cfgs) {
requestAnimationFrame(autoScroll);
}
e.preventDefault();
- e.stopPropagation();
+ e.stopPropagation();
+
+ Array.from(node.children).forEach((ele) => { ele.style.pointerEvents = 'auto' });
+ node.style.cursor = 'auto';
return false;
}
diff --git a/public/vanilla.html b/public/vanilla.html
index 26764a3..5a4b367 100644
--- a/public/vanilla.html
+++ b/public/vanilla.html
@@ -3,6 +3,7 @@
Kinetic Scroll - Vanilla JS
+
@@ -24,6 +25,7 @@
text-align: center;
margin: 0 0 1em;
}
+
.container {
border: 1px solid #eee;
width: fit-content;
@@ -32,6 +34,7 @@
overflow: hidden;
transform: scale(1);
}
+
ul {
width: fit-content;
text-align: left;
@@ -47,8 +50,14 @@
display: flex;
align-items: center;
gap: 10px;
+ transition: background-color 0.4s ease;
+ cursor: pointer;
}
-
+
+ ul > li.sel {
+ background-color: #fff;
+ }
+
ul > li > img {
width: 40px;
height: 32px;
@@ -59,8 +68,6 @@
border-bottom: none;
}
-
-
h1 {
color: #ff3e00;
text-transform: uppercase;
@@ -86,9 +93,7 @@
}
@media (min-width: 640px) {
- main {
- max-width: none;
- }
+ main { max-width: none; }
}
@@ -114,14 +119,20 @@ Example
import countries from './countries.js';
import { kineticscroll } from './kineticscroll.js';
+ let selected = '';
+ let list;
+
document.addEventListener('DOMContentLoaded', async function(event) {
- let list = document.querySelector('.container > ul');
+ list = document.querySelector('.container > ul');
countries.forEach(country => {
let li = document.createElement('li');
let img = document.createElement('img');
let span = document.createElement('span');
+ li.setAttribute('code', country.code.toLowerCase());
+ li.addEventListener('click', handleClick);
+
img.setAttribute('src', `./flags/${country.code.toLowerCase()}.png`);
img.setAttribute('loading', 'lazy');
img.setAttribute('alt', country.name);
@@ -133,5 +144,11 @@ Example
});
kineticscroll(list, { indicator: 'indic', snap: true });
});
+
+ function handleClick(e) {
+ e.stopPropagation();
+ [...list.querySelectorAll('li')].forEach(ele => ele.classList.remove('sel'));
+ e.currentTarget.classList.add('sel');
+ }