Skip to content

Instantly share code, notes, and snippets.

@davismj

davismj/app.html

Last active March 31, 2021 19:18
Show Gist options
  • Save davismj/33fdd8b265739ffa7dfcf52115698a46 to your computer and use it in GitHub Desktop.
Save davismj/33fdd8b265739ffa7dfcf52115698a46 to your computer and use it in GitHub Desktop.
Download ZIP
Challenge: Scrollbar Method (solved)
Raw
app.html
<template>
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.container {
position: relative;
overflow: hidden;
max-height: 100vh;
max-width: 100vw;
padding: 0;
}
.big-content {
width: 200vw;
height: 100vh;
background: linear-gradient(90deg, black, white);
}
.scrollbar {
position: fixed;
background: white;
}
.vertical {
height: 100%;
width: 2rem;
right: 0;
}
.horizontal {
width: 100%;
height: 2rem;
bottom: 0;
}
.scrollbar .handle {
background: skyblue;
height: 2rem;
width: 2rem;
}
</style>
<div element.ref="$container" class="container">
<div class="big-content"></div>
<div element.ref="$scrollbar" class="scrollbar horizontal">
<div element.ref="$handle" class="handle" mousedown.delegate="handleMousedown($event)"></div>
</div>
</div>
</template>
Raw
app.js
function clamp(min, val, max) {
return Math.min(Math.max(min, val), max);
}
export class App {
x0;
dx0 = 0;
totalScrollbarWidth;
totalContainerWidth;
$container;
$handle;
$scrollbar;
handleMousedown(event) {
const { $scrollbar, $handle, $container } = this;
this.x0 = event.x;
this.totalScrollbarWidth = $scrollbar.clientWidth - $handle.clientWidth;
this.totalContainerWidth = $container.scrollWidth - $container.clientWidth;
document.addEventListener('mousemove', this.handleMousemove);
document.addEventListener('mouseup', this.handleMouseup);
}
handleMousemove = (event) => {
const { $container, $handle, x0, dx0, totalScrollbarWidth, totalContainerWidth } = this;
const dx = this.dx = clamp(0, dx0 + event.x - x0, totalScrollbarWidth);
$handle.style.transform = `translateX(${dx}px)`;
$container.scrollLeft = dx / totalScrollbarWidth * totalContainerWidth;
};
handleMouseup = (event) => {
this.x0 = null;
this.dx0 = this.dx;
this.dx = null;
this.totalScrollbarWidth = null;
this.totalContainerWidth = null;
document.removeEventListener('mousemove', this.handleMousemove);
document.removeEventListener('mouseup', this.handleMouseup);
};
}
Raw
index.html
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body aurelia-app>
<h1>Loading...</h1>
<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
<script>
require(['aurelia-bootstrapper']);
</script>
</body>
</html>
Raw
main.js
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-validation');
aurelia.start().then(() => aurelia.setRoot());
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment