waxmiguelito / iui

Automatically exported from code.google.com/p/iui
MIT License
0 stars 0 forks source link

ScrollTo improvement #200

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago
Hi,

I would like to share one thing I've done in the iPhone website we are 
developing.

I've found how to render a smooth scrolling effect here: 
http://www.itnewb.com/v/Creating-the-Smooth-Scroll-Effect-with-JavaScript

The goal was to replace the ScrollTo() function.

The modified code for iPhone is:

    function smoothScroll(){
        var startY = self.pageYOffset;
        var stopY = 1;
        var distance = stopY > startY ? stopY - startY : startY - stopY;
        if (distance < 100) {
            scrollTo(0, stopY); return;
        }
        var speed = Math.round(distance / 90);
        var step = Math.round(distance / 30);
        var leapY = stopY > startY ? startY + step : startY - step;
        var timer = 0;
        if (stopY > startY) {
            for ( var i=startY; i<stopY; i+=step ) {
                setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
                leapY += step; if (leapY > stopY) leapY = stopY; timer++;
            } return;
        }
        for ( var i=startY; i>stopY; i-=step ) {
            setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
            leapY -= step; if (leapY < stopY) leapY = stopY; timer++;
        }
    }

I replace all ScrollTo(0, 1) with smoothScroll(), and added one after the 
sliding effect to make the next page go automatically at the right location 
(so we don't need to scroll up). It looks a lot nicer like this (imho).

Hope it can be useful ;-)

Regards,

Charles

Original issue reported on code.google.com by char...@cableorganizer.com on 9 Dec 2009 at 3:11

GoogleCodeExporter commented 9 years ago
That reads great - im looking into it! 

Cheers and thanks for sharing!
Max

Original comment by melcher....@gmail.com on 9 Dec 2009 at 9:20

GoogleCodeExporter commented 9 years ago
Lifesaver! This is a great piece of code that works as advertised. The call 
fits at the end of the slidePages function 
and hasn't caused me anything but smiles since I added it. Thanks!

John Lee

Original comment by personal...@gmail.com on 24 Dec 2009 at 2:30