davismj/app.css

## app.css
* {
  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;
}

## app.html
<template>
  <link rel="stylesheet" href="app.css" />
  <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>

## app.js
export class App {

  $container;
  $handle;
  $scrollbar;

  handleMousedown = (event) => { };

  handleMousemove = (event) => { };

  handleMouseup = (event) => { };
}

## 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>

## main.js
export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-validation');

  aurelia.start().then(() => aurelia.setRoot());
}
	* {
	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;
	}
	<template>
	<link rel="stylesheet" href="app.css" />
	<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>
	export class App {

	$container;
	$handle;
	$scrollbar;

	handleMousedown = (event) => { };

	handleMousemove = (event) => { };

	handleMouseup = (event) => { };
	}
	<!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>
	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging()
	.plugin('aurelia-validation');

	aurelia.start().then(() => aurelia.setRoot());
	}