Rik Schennink

@rikschennink

PQINA

434

Indie product developer β€’ Freelance Front-end Dev β€’ Web enthusiast β€’ Runs a tiny web plugin company called @pqina_ β€’ Hi! πŸ‘‹πŸ»

Scrollscreen a Vanilla JavaScript Custom Scrollbar Solution

Scrollscreen positions a layer precisely on top of the browser default scrollbar allowing custom styles. I know, I know, there are some funky -webkit-...

Scrollscreen positions a layer precisely on top of the browser default scrollbar allowing custom styles.

Tested both MacOS (with and without MacOS auto-hiding scrollbars) and Windows on browsers IE11, Edge, Firefox, Chrome, Safari, iOS (with and without momentum scrolling).

Correctly deals with text direction.

Enjoy!
https://github.com/rikschennink/scrollscreen

A tiny library I'm working on that allows declarative interaction patterns
document.addEventListener('DOMContentLoaded', function() { ariaAutopilot.instruct({ '[role=tab]': { 'activate': 'context -> select', 'select': 'siblings -> deselect, set-script-focusable; context -> set-focusable; target -> show, set-focusable; target -> update-location', 'deselect': 'target -> hide, set-script-focusable', 'key_down': 'target -> focus', 'key_left': 'previous-sibling -> select', 'key_right': 'next-sibling -> select' }, '[role=tabpanel]': { 'target': 'origin -> select; context -> focus', 'key_up': 'origin -> focus' } }); });

This recipe automatically adds accessible tab interaction to the page. You simply define the correct HTML with the correct ARIA roles and the library handles it from there.

I'm drawing icons an image editor. Currently working on reset and re-center. Not sure about re-center, it basically recenters/scales the crop area (and image) to the center of the viewport (if you have iOS, the photo app does it automatically after waiting a few seconds).

Captured with Snapper App