jQuery ScrollTo plugin - horizontal scrolling -
i hope appropriate question post here. it's more theory question rather specific coding problem.
i'm using scrollto plugin ariel flesler create horizontal scrolling webpage. good, i've managed download working demo tutorial site ... except don't understand theory behind horizontal scrolling.
in particular, of tutorials i've come across (as answers here on stackoverflow) suggest creating html wrapper element seems act 'viewport' , scrolling content within wrapper (nested tags example) using scrollto plugin.
why can't position tags off-screen (say, 3000px right) , use scrollto horizontally scroll these tags?
i tried , works can't achieve smooth scroll easing (see code below).
would appreciate if give me insight this.
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>scrollto test</title> <style> #box { width:100px; height:100px; background-color:#f00; position:relative; top:0; left:3000px; } </style> </head> <body> <nav> <a href="#">click</a> </nav> <div id="box">box</div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/jquery.scrollto.min.js" type="text/javascript"></script> <script src="js/jquery.easing.1.3.js" type="text/javascript"></script> <script> $('nav a').on("click", function () { //$.scrollto( '#box', {top:0 , left:800}, {easing:'easeoutelastic'} ); $.scrollto( '#box', 800, {easing:'easeoutelastic', axis:'x'} ); }); </script> </body> </html> update: created jsfiddle at: http://jsfiddle.net/wzd8202a/
i'm creator of scrollto plugin. should create demo of using jsfiddle, can fix , share it.
edit: works, referring fact doesn't bounce correctly? if so, that's because nor window nor other elements can scroll beyond size. need leave margin after element that.
in example, set larger width body: body { width:4000px; }
here modified version bounces correctly.
let me know if it.
Comments
Post a Comment