cubiq / 2-way-iScroll

Horizontal snap scroll (carousel) + vertical free scroll on mobile webkit using iScroll
MIT License
116 stars 27 forks source link

jump to a page directly #6

Open kiran-aghor opened 12 years ago

kiran-aghor commented 12 years ago

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?

cubiq commented 12 years ago

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.

alexmen commented 12 years ago

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);

}

storynory commented 12 years ago

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;

});