joicomponents
Version:
Design patterns to build native web components
83 lines (67 loc) • 2.94 kB
HTML
<html lang="en">
<body>
<style></style>
<scroll-div style="font-size: 164px; height: 100vh;">
<div style="background:red">
<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div><div>G</div><div>H</div><div>I</div><div>J</div><div>K</div><div>L</div><div>M</div><div>N</div><div>O</div><div>P</div><div>Q</div><div>R</div><div>S</div><div>T</div><div>U</div><div>V</div><div>W</div><div>X</div><div>Y</div><div>Z</div>
</div>
<div style="background:green">
<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div><div>G</div><div>H</div><div>I</div><div>J</div><div>K</div><div>L</div><div>M</div><div>N</div><div>O</div><div>P</div><div>Q</div><div>R</div><div>S</div><div>T</div><div>U</div><div>V</div><div>W</div><div>X</div><div>Y</div><div>Z</div>
</div>
<div style="background:blue">
<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div><div>G</div><div>H</div><div>I</div><div>J</div><div>K</div><div>L</div><div>M</div><div>N</div><div>O</div><div>P</div><div>Q</div><div>R</div><div>S</div><div>T</div><div>U</div><div>V</div><div>W</div><div>X</div><div>Y</div><div>Z</div>
</div>
</scroll-div>
<script type="module">
import {DraggingFling} from "../../src/gestures/DraggingFling.js";
class ScrollDiv extends DraggingFling(HTMLElement) {
constructor() {
super();
this._autoScroller = undefined;
this._onDraggingListener = e => this._onDragging(e);
this._onFlingingListener = e => this._onFlinging(e);
this._onDownListener = e => this._onDown(e);
}
connectedCallback() {
super.connectedCallback();
this.style.display = "block";
this.style.overflowY = "scroll";
this.addEventListener("dragging", this._onDraggingListener);
this.addEventListener("fling", this._onFlingingListener);
this.addEventListener("pointerdown", this._onDownListener);
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener("dragging", this._onDraggingListener);
this.removeEventListener("fling", this._onFlingingListener);
this.removeEventListener("pointerdown", this._onDownListener);
}
_onDragging(e) {
this.scroll(e.detail.moveY);
}
_onDown(e) {
cancelAnimationFrame(this.autoScroller);
}
_onFlinging(e) {
this.autoScroll(e.detail.distY * 0.3, 0.95);
}
scroll(y) {
this.scrollTop = (this.scrollTop || 0) + parseInt(y);
}
autoScroll(startSpeed, dec) {
const x = Math.abs(startSpeed);
if (x <= 1)
return;
if (x < 5)
dec *= dec;
this.scroll(startSpeed);
const nextSpeed = startSpeed * dec;
const nextDec = dec;
this.autoScroller = requestAnimationFrame(() => this.autoScroll(nextSpeed, nextDec));
}
}
customElements.define("scroll-div", ScrollDiv);
</script>
</body>
</html>