scroll slider

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;
@@ -44,4 +44,11 @@ div.controlpoint{
 }
 #rotterdam li{
 	list-style: none;
-}
+}
+
+
+#curve {
+	padding : 1em;
+	height: 100vh;
+	overflow: scroll;
+}

index.html

@@ -21,7 +21,7 @@
         width      : 100%;
         height     : 400px;
         background: transparent;
-    }    
+    }
     #slider2 {
         position: absolute;
         top:0;
@@ -50,10 +50,25 @@
             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">
-        <h1>Relearn 
+        <h1>Relearn
     	<select onchange="window.location.href=this.value" style="display: inline-block;">
 			<option value="http://relearn.be/2019/" selected="selected">2019</option>
 			<option value="http://relearn.be/2017/">2017</option>
@@ -66,7 +81,7 @@
 
         <p>Relearn 2019 is a curve, transversing multiple times and spaces.</p>
 
-        <div id="rotterdam" class="controlpoint">    
+        <div id="rotterdam" class="controlpoint">
             <h2>RELEARN 2019.Rotterdam</h2>
 
             <p>7th, 8th & 9th of June 2019<br>
@@ -131,4 +146,3 @@
     </div>
 </body>
 </html>
-