css/stylesheet.css

@@ -1,6 +1,6 @@
 body{
 	position: relative;
-	margin:1em;
+	margin:0;
 	padding:0;
 	font-size: 120%;
 	line-height: 1.4;
@@ -21,10 +21,10 @@ h1{
 
 div#sliders{
 	position: fixed;
-	width: 1000px;
+	width: 500px;
-	height: 500px;
+	height: 400px;
 	top:60px;
-	left:340px;
+	right:100px;
 }
 div#slider{
 	float: left;
@@ -45,3 +45,10 @@ div.controlpoint{
 #rotterdam li{
 	list-style: none;
 }
+
+
+#curve {
+	padding : 1em;
+	height: 100vh;
+	overflow: scroll;
+}

index.html

@@ -50,6 +50,21 @@
             curve      : { width:4, color:"#333", cap:"round" }
         });
     });
+
+    // scroll
+    $(document).ready(function() {
+      $('#slider').bind('slide.pathslider', function(event, slider){
+        var scrollPos = slider.percent * ( $('#curve')[0].scrollHeight - $(window).height() ) / 100
+        $('#curve').scrollTop(scrollPos);
+      });
+
+      $('#slider2').bind('slide.pathslider', function(event, slider){
+        var scrollPos = slider.percent * ( $('#curve')[0].scrollHeight - $(window).height() ) / 100
+        $('#curve').scrollTop(scrollPos);
+      });
+
+    });
+
     </script>
 
     <div id="curve">
@@ -131,4 +146,3 @@
     </div>
 </body>
 </html>
-