Browse Source

slwr: smooth slider scroll, mobile style

master
lowrussia 6 years ago
parent
commit
47e12e1080
  1. 17
      css/stylesheet.css
  2. 0
      d3-example.html
  3. 4
      index.html

17
css/stylesheet.css

@ -51,3 +51,20 @@ div.controlpoint{
height: 100vh; height: 100vh;
overflow: auto; overflow: auto;
} }
/*--- MOBILE ---*/
@media only screen
and (max-width : 1024px) {
div#sliders {
position: absolute;
top: -50px;
left: -50px;
transform: scale(0.5);
}
#curve {
padding-top: 200px;
}
}

0
index2.html → d3-example.html

4
index.html

@ -55,12 +55,12 @@
$(document).ready(function() { $(document).ready(function() {
$('#slider').bind('slide.pathslider', function(event, slider){ $('#slider').bind('slide.pathslider', function(event, slider){
var scrollPos = slider.percent * ( $('#curve')[0].scrollHeight - $(window).height() ) / 100 var scrollPos = slider.percent * ( $('#curve')[0].scrollHeight - $(window).height() ) / 100
$('#curve').scrollTop(scrollPos); $('#curve').stop().animate({scrollTop: scrollPos}, 200);
}); });
$('#slider2').bind('slide.pathslider', function(event, slider){ $('#slider2').bind('slide.pathslider', function(event, slider){
var scrollPos = slider.percent * ( $('#curve')[0].scrollHeight - $(window).height() ) / 100 var scrollPos = slider.percent * ( $('#curve')[0].scrollHeight - $(window).height() ) / 100
$('#curve').scrollTop(scrollPos); $('#curve').stop().animate({scrollTop: scrollPos}, 200);
}); });
}); });

Loading…
Cancel
Save