Browse Source

scroll slider

master
lowrussia 5 years ago
parent
commit
14a53f7f5e
  1. 15
      css/stylesheet.css
  2. 16
      index.html

15
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;
height: 500px;
width: 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;
}

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

Loading…
Cancel
Save