View Full Version : scrollto and iscroll - nearly works together.

01-03-2012, 07:07 PM

i'm not sure if what i am trying to do is possible for a start, hopefully it is.
i am using a combination of the jquery plugins "scrollTo.js" and "iscroll.js"

with a bit of tinkering i've sort of got it working.

but here's the (slightly longwinded) question that i have...

in my page i have a navigation/menu that's static for horizontal scrolling but moves with the page when scrolled vertically - without iscroll.js this works a treat.

but because i need to allow for the mobile side of things i need to use iscroll.
so the entire page becomes draggable, left and right.

so... in the js calls that i pasted below, i have the following problems.
first one is that if i click on a link from the menu it "scroll(s)To" the panel selected, but following that it will only let me drag the window to the right - if i drag the window to the left it springs straight back to the position of the href anchor.
second problem - it won't let me scroll vertically only horizontally with the iscroll scroller.
final issue is that if i click a link in the menu the iscroll scrollbar stays put and vanishes off the screen it doesn't stay relative to position and follow the movement or scrolled-ness (is that even a word?) of the window.

is there any way of marrying the two up? so that the iscroll.js acts like the browser default scrollbars do?

sorry for waffling on! but that is as concise as i could make it!

i guess that the "long and short" of it comes down to - how do i makes the iscroll.js act and react in the same manner as the default browser scrollbars behave?

based on the hope that anyone reading this post is familiar with both scrollTo.js and iscroll.js this is how i am calling them both, as source and function...

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<script type="application/javascript" src="iscroll.js"></script>


$(document).ready(function() {

$('a.panel').bind("click touch", function(){


current = $(this);

$('#wrapper').scrollTo($(this).attr('href'), 800, {axis: 'x'});

return false;

$(window).resize(function () {


$("#footwrap").css({top: -$('#wrapper').scrollTop()});

<script type="text/javascript">

var myScroll;
function loaded() {
myScroll = new iScroll('wrapper', { zoom:true });

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

document.addEventListener('DOMContentLoaded', loaded, false);


is there any glaringly obvious mistakes that anyone can see? or am i looking at a long and rocky road to get the two working as one?

...hopefully the former! :confused::confused::confused: