From 7ae3eb6e8f1152222fa1ff6ad3300c11d918864c Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Tue, 17 May 2016 17:42:25 +0300
Subject: [PATCH] started experimenting with ribbon scrolling (problem: no way
 to hide scrollbars on FF)...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 .../experiments/native-scroll-ribbon.html     | 85 +++++++++++++++++++
 1 file changed, 85 insertions(+)
 create mode 100755 ui (gen4)/experiments/native-scroll-ribbon.html
diff --git a/ui (gen4)/experiments/native-scroll-ribbon.html b/ui (gen4)/experiments/native-scroll-ribbon.html
new file mode 100755
index 00000000..37c17dda
--- /dev/null
+++ b/ui (gen4)/experiments/native-scroll-ribbon.html	
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+<style>
+.viewer {
+	display: inline-block;
+	border: solid 1px gray;
+
+	padding-top: 100px;
+	padding-bottom: 100px;
+}
+
+
+/* appears that there is no way to hide the scrollbar on FF */
+.ribbon-container {
+	position: relative;
+
+	height: 120px;
+	width: 600px;
+
+	overflow-x: scroll;
+	overflow-y: hidden;
+
+	-ms-overflow-style: none;
+
+	/*border: solid 1px gray;*/
+}
+.ribbon-container::-webkit-scrollbar { 
+    display: none; 
+}
+
+
+.ribbon {
+	position: relative;
+	display: inline-block;
+
+	height: 100px;
+	width: 1000px;
+
+	background: silver;
+	/*box-shadow: 0px 0px 25px -10px rgba(0,0,0,0.75);*/
+	box-shadow: 0px 0px 25px -10px rgba(0,0,0,1);
+
+	/* start/end markers... */
+	border-left: 100px solid gray;
+	border-right: 100px solid gray;
+
+	margin: 10px;
+
+	margin-left: 50%;
+	/* XXX for some reason this does not work as expected */
+	margin-right: 50%;
+}
+
+</style>
+
+<script src="../ext-lib/jquery.js"></script>
+<script src="../ext-lib/jquery-ui.js"></script>
+
+<script src="../lib/jli.js"></script>
+
+<script>
+
+</script>
+
+<body>
+
+<div class="viewer">
+	<div class="ribbon-set">
+		<div class="ribbon-container">
+			<div class="ribbon">
+			</div>
+		</div>
+		<div class="ribbon-container">
+			<div class="ribbon">
+			</div>
+		</div>
+		<div class="ribbon-container">
+			<div class="ribbon">
+			</div>
+		</div>
+	</div>
+</div>
+
+</body>
+</html>
