@weft-js/scroll 0.1.4 → 0.1.5-nightly.20261111.4

package/README.md

@@ -435,6 +435,9 @@ const list = virtualizer(area.viewport, {
   `aria-controls`.
 - **Reduced motion:** with `motion: 'auto'` (the default) and `prefers-reduced-motion: reduce`, animated scrolls
   are instant, bars stop fading and touch doesn't rubber-band.
+- **Touch screens:** the bars are still this package's, drawn in place of the native ones. With a coarse pointer a
+  DOM bar lets the swipes that start at the edge through to the content; its thumb takes a finger only while it
+  shows, over a 44 px area. A canvas bar keeps its whole track.
 - **Right to left:** `x` and `scrollLeft` run from 0 to negative, as the DOM's do. The vertical bar sits at the
   inline end and the horizontal thumb starts from the right.
 - **Selection:** dragging a text selection past the edge scrolls toward it, faster further out, and the selection

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weft-js/scroll",
-  "version": "0.1.4",
+  "version": "0.1.5-nightly.20261111.4",
   "description": "Scrolling in JavaScript: native-feeling wheel, touch, keys and focus, with scrollbars drawn in the DOM or on a canvas",
   "keywords": [
     "canvas",

package/styles/scroll.css

@@ -157,6 +157,30 @@
 :where([data-scroll] [data-part='scrollbar'][data-active] > [data-part='thumb']) {
   background: var(--scroll-active-color, color-mix(in srgb, currentColor 60%, transparent));
 }
+/* Touch: a bar at the edge mustn't take the swipes that start there. A DOM thumb takes a finger only while it shows,
+   over a 44 px area across, wider than it paints; the rest of the bar lets touches through to the content. A canvas bar, with no
+   thumb element, keeps its whole track. */
+@media (pointer: coarse) {
+  :where([data-scroll] > [data-part='scrollbar']:has(> [data-part='thumb'])) {
+    pointer-events: none;
+  }
+  :where([data-scroll] > [data-part='scrollbar']:is([data-visible], [data-active]) > [data-part='thumb']) {
+    pointer-events: auto;
+  }
+  :where([data-scroll] [data-part='scrollbar'][data-orientation='vertical'] > [data-part='thumb'])::before {
+    content: '';
+    position: absolute;
+    inset-block: -8px;
+    inset-inline: -32px -6px;
+  }
+  :where([data-scroll] [data-part='scrollbar'][data-orientation='horizontal'] > [data-part='thumb'])::before {
+    content: '';
+    position: absolute;
+    inset-block: -32px -6px;
+    inset-inline: -8px;
+  }
+}
+
 /* Native mode with DOM bars: the viewport's scroll position drives each thumb through a scroll timeline, which the
    browser runs on the compositor, so the thumb keeps up while the main thread is busy. The script sets the two ends
    and only sets `data-timeline` where the browser supports it; elsewhere it moves the thumb itself. */