scroll slider

This commit is contained in:
lowrussia 2019-05-11 23:13:49 +02:00
parent cdb74c2a88
commit 14a53f7f5e
2 changed files with 30 additions and 9 deletions

View File

@ -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;
}

View File

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