2-way-iScroll
2-way-iScroll copied to clipboard
jump to a page directly
I want to use this scroll for a news slider. I have a page with list of news titles. clicking on one of the news item will bring up the horizantal scrolling page. Is it possible to directly jump to a specified page in 2-way iscroll? For example - On the listview page, user clicks on 5th news item. It will go to a page that has 2-way iscroll in it but it should show that particular 5th page containing news item. Is this feature available?
I still miss a scrollToPage method, but you may try with scrollTo(x, y, time). where x for example is pageNum * elementWidth and y is pageNum * elementHeight.
I had the same problem and I solve it as follows
... //size of div var PageSize = parseInt($('.new-detail').css('width').replace(/[^-\d.]/g, '')); //jump to page var PaginaDespl = -(PageSize * news);
// property have different name depend the browser var div = document.getElementById('scroller-news-details'); var propiedad = getPropiedadACambiar(div);
//jump if (propiedad) div.style[propiedad] = "translate3d(" + PaginaDespl + "px,0px,0px)";
// I need this to work fine the scroll scrollHorizVert();
// get the property that I would like to change function getPropiedadACambiar(element) { var properties = [ 'transform', 'webkitTransform', 'msTransform', 'MozTransform', 'OTransform']; var p; while (p = properties.shift()) { if (typeof element.style[p] != 'undefined') { return p; } } return false; }
function scrollHorizVert() { myScroll = new TWIS('#wrapper-news-details');
// liberamos memoria
window.removeEventListener('load', scrollHorizVert, false);
}
Hi I am trying with this function, hacked from the main iScroll script. It does scroll horizontally to the page, but vertical scrolling is disabled when I use it. Any suggestions gratefully received. Thank you. Hugh
scrollToPage = function (myScroll,pageX, pageY, time) {
var that = myScroll, x, y;
if (pageX == 'next') pageX = (that.currentPage + 1);
if (pageX == 'prev') pageX = (that.currentPage -1);
if (pageX == 0) {
window.location.replace("../index.html")
}
else {
if (that.options.onScrollStart) that.options.onScrollStart.call(that);
x = -that.wrapperW * pageX;
y = -that.wrapperH * pageY;
if (x < that.maxScrollX) x = that.maxScrollX + 1;
if (y < that.maxScrollY) y = that.maxScrollY - 1;
that.scrollTo(x, y, time || 400);
that.currentPage = pageX;
}
};
$(".next").bind('click', function () {
scrollToPage(myScroll,'next', 0, 400);
return false;
});
$(".back").bind('click', function () {
scrollToPage(myScroll,'prev', 0, 400);
return false;
});