ftlabs / ftscroller Goto Github PK

Just know ftscroller for a few days, it's a great scroller js library for mobile device.

Is that possiable to implemention 'pull to refresh' for FTscroller?

Any ideas for this?

In many scrollbar implementations, including OSX and iOS, you can click/touch the scrollbar "marker" and use it as a handle to drag it up or down (assuming vertical scroll). This doesn't seem possible with ftscroller, or am I missing something? I can scroll the content, but there is no "handle".

If I was to implement this feature myself, do you have any hints or pointers to specific code?

This script is great, works like a charm on Android and iPhones, but i have found one problem with IE 10 on my Lumia 820.

I have 2 vertical scollers inside 1 horizontal. When the page loades the first vertical scroller scrolls fine. When i swipe to the left and gets to vertical scroller 2 the scrolling inside vertical scroller 2 also works. But when i swipe back to vertical scroller 1 the vertical scrolling stops on both vertical scrollers. Why is that?

As i said, this problem only occurs on IE 10.

Can this be coded around?

Feel free to try my code: http://m.vasabladet.fi/new/ft/

Actually the same issue accurs on the ft demo: http://ftlabs.github.com/ftscroller/examples/galleryscrollers.html

Hopeful for answers

/Patrik

I have a UL containing a number of items that I am filtering using jQuery. The jQuery code simply uses fadeOut to hide the li as the user types into an input field.

As the list is reduced the scrollable area remains at the original height. Is there a method to update the height on keyup?

Many thanks.

Hi,

I'm trying to figure out the best way of dynamically adding elements.

One method is to have a

Just been experimenting with the ftscroller with the latest Firefox and the mouse dragging doesn't seem to be working at all on any of the demos.

Seems fine in Chrome/Safari though!

Below you can see a timeline graph of three scrollers being set up. Each setup operation causes a read and a write operation to the DOM, and therefore results in three layouts/reflows in this particular frame, blowing our 60fps frame budget.

Options

• A. Offer a more granular API that gives the user the option of batching the reads and writes to prevent this thrashing, e.g. scroller.calc() and scroller.set() (favoured).
• B. Use a library like FastDom internally (easiest).

Hello,

I have been surprised to see that the scrollend event was not fired if the user cancels the scrolling, I don't understand the choice behind it. It is useful to know when the scroll has ended, and even if the user cancels it by tapping the screen while the scrolling takes place, I think it can still be considered as a scrollend scenario. Could you explain please?

Thank you for your help,

Jean-Francois

Is it possible to apply the same scroller to many identical elements that are in a row? I'd like to do something like this:

var nestedScroller = new FTScroller(document.querySelector('.eventWrap'), {
scrollbars: true,
scrollingX: false,
scrollingY: true,
updateOnWindowResize: true
});

However, this only adds an FTScroller to the first element with the class "eventWrap" that it finds.

On IE11 you need to double click the textarea before you can type in it. It either immediately looses focus or doesn't get it.
With IE9 & 10, the problem is even worse. To be able to type in the textarea you need to right-click it. If the right-click doesn't do it, then right-click and select "select all".
You can loose focus by right-clicking somewhere else.

That's not all though. Once you have focus on the textarea, left click inside the textarea and hold it down. Then move your mouse downwards, after that release. Move your mouse and you'll notice you're stuck in dragging.

Very simple fiddle: http://jsfiddle.net/VX968/4/

Hi,

ftscroller allows more than one finger touch to scroll, generally swipe/scroll restricted for single finger scroll.

any way to restrict only single finger to scroll ftscroller?

regards,
Ramkumar P

The link with text "Multiple vertical scrollers in a horizontally paged scroller" in the windowScrollingActiveFlag description should be to http://ftlabs.github.com/ftscroller/examples/galleryscrollers.html, and not https://github.com/ftlabs/examples/galleryscrollers.html.

I'm using ftscroller to write a small app that has several vertical scrollers inside a horizontal one and its not paginating the content correctly. The problem is that when I move to a higher number page part of the previous one is still visible on the left, it seems like the scroller is not assigning the pages the correct width, although it assigns the total width of all the pages correctly. You can check this behavior on your paginated demo code, just add some more pages and you will see it.

Thanks

i'm trying to set the scroll speed but don't find a method to do this.
i want to set a slow scroll.
somebody can help me ? thank a lot

Hi, Thanks for the wonderful library! I'm using Browserify to package and running it in Chrome. But the FTScroller object is empty!

var FTScroller = require("ftscroller");
console.log(FTScroller); // empty object!

I believe this is because of the var module declaration in this line which could be messing up with the existing module object.

I've found your other excellent library ftlabs/FastClick to use a very nice way to define the module. I've tested with that and it works like a charm. Can we use that same approach here too?

Chrome v 33.0.1750.152, Browserify v 3.38.0, Node v 0.10.26, NPM v 1.4.3

• Apply FT scroller to a container div with content tall enough to need to scroll.
• Scroll it to so the bottom of the content is visible
• Run the destroy method.
• Style tag of inner scroller wrapping element still has transform applied eg -webkit-transform: translate3d(0, -146px, 0);

(See workaround here - http://bzr/econhtml5-dev/revision/1712)

Hi Team,

First of all I would like to thank you all for your efforts to bring such a nice tool to make others life .

I'm working on an app, which is being developed using Jquery Mobile and other stuff required to develop a hybrid application to support cross platform compatibility.

Initially I have been testing the FTScroller functionality on Android v4.0 so could not observe the issue. Recently I started testing the app on Android v3.2 and I was surprised that, it's not working on devices running on Android v3.2.

Please have a look at the errors I'm getting while running the code in Android v3.2.

06-11 17:39:37.668: E/Web Console(400): SyntaxError: Parse error at file:///android_asset/resource/lib/ftscroller.js:2182

Whenever it tries to execute the piece of code given below, throws the error that, Can't find variable FTScroller as given below.

Code: var scroller = new FTScroller(document.getElementById('wrapper'), {
scrollingX: false
});

Error: 06-11 17:39:59.279: E/Web Console(400): ReferenceError: Can't find variable: FTScroller at file:///android_asset/resource/js/controller/formsScreenController.js:99

Could you suggest me the fix for this issue please?

Thanks,

I know we add uses3d-esque hacks onto FT scroller elements to push the scroll rendering onto the GPU but that feels a little wasteful in cases where FT Scroller knows that that element will never scroll.

To recreate:

• use Chrome's to "Show Composited layer borders" to identify the hardware accelerated layers. (Remove all of the ones on the accordions)
• Give the FT scroller element and accordion title ids so you can trigger events / manipulate properties on them with JS to prevent timeline getting filled with noise.
• Use timeline to record, run the commands show in screenshot into the console.

Conclusion: don't make layers unnecessarily.

I have a list scroller where the width is entirely contained in its container. There is no horizontal scrolling, and this is set in the options for the scroller ('scrollingX: false').

I would like to be able to select text from the list items.

As it is, FTScroller catches all mouse move events so that there is no selection.

Is there a way to enable text selection?

Samsung's Dolfin 2 browser has a problem with touchmove events: clientY seems to be increased by the difference between pageY and clientY at touchstart. I triy to workaround this problem by addiing

var _isDolfin2 = (/Dolfin\/2\./).test(navigator.userAgent);

in the outermost closure,

var _diffY;

in the FTScroller constructor,

_diffY = _isDolfin2 ? touchEvent.pageY - touchEvent.clientY : 0;

at the end of _onTouchStart,

 _updateScroll(touchEvent.clientX, touchEvent.clientY - _diffY, moveEvent.timeStamp, moveEvent);

instead of

_updateScroll(touchEvent.clientX, touchEvent.clientY, moveEvent.timeStamp, moveEvent);

in _onTouchMove, and

_diffY = 0;

at the end of _onTouchEnd.

There are problems with form controls (e.g. text input, select) on Android 2.3* native browsers. They don't open the keyboard or the 'option picker' UI control. Looks like this is caused by the CSS transformations.

I tried to solve this by adding a variant using top/left instead of CSS transformations. This is slower but seems to work with form controls.

My scrollable content has segments that are not a uniform width. Is there a way I can set individual segment sizes and not have a single value for each segment? Thank you so much for your support!

Currently, ftscroller uses "document.hasOwnProperty('ontouchstart')" to test for touch support. Firefox Mobile/Tablet on Android report false, although they have touch support. Test for "ontouchstart' in window" would report true in Firefox.

I have a ftscrollable div with updateOnChanges = true.
There are some sub-elements of the div that I hide / show at runtime.

The scroller does not appear to respond to the (implicit) new size of the div caused by hiding / showing.

Is there a way to force 'refresh', or force whatever action is normally triggered by a genuine content change ?

The nested scrollers example provided shows 2 vertical scrollers inside 1 horizontal scroller.

Is it possible to have 1 horizontal scroller inside another horizontal scroller, or one vertical inside another vertical scroller ?

I may be wrong, but it looks like it is currently not possible to do it.

This may be due to events on the nested scroller being captured by the containing scroller, in which case, this could be solved by just supressing event bubbling from any scroller ?

Start firing scroll events as soon as scroll starts, and not wait until scrollBoundary reached so that libraries can more reliably detect when a scroll begins.

hi guys, first of all thanks for this excellent scroller lib
just like native scrolling, "scroll" event isnt fired on touch devices when your finger isnt touching the screen but the screen is still scrolling.
thus when you try to access scrollTop in a setInterval loop scrollTop value is wrong

So two questions ;-)

• Can we get the scroll event to be fired when the screen is still scrolling?
• Can the real scrollTop value be exposed?

I am looking at the "Horizontal paged strict version".

If I attach segmentwillchange event as follows:

segmentwillchange = function(changeObject) {
console.log(changeObject);
};
scroller.addEventListener("segmentwillchange", segmentwillchange);

If I scroll while maintaining mousedown, the event is fired correctly when the segment threshold is crossed.

However, if I scroll "quickly" (ie: mousedown, quick movement left or right, mouseup), then the event fires only when the scroller has finished its animation, not when the threshold is crossed.

I've been digging in the source code and trying to figure out a way to limit the bounce effect.

As far as I know the bounce animation is dependable on the fling which makes it possible to bounce the page on almost the entire screen.

What I would like to accomplish is to limit that bounce to, let's say, half the screen size (for example).

The bezier curve on the bounce only have effect on the animation speed so if someone could point me in the right direction that would be great.

Using the following devices

• Samsung Galaxy SIII - Android 4.1.2
• Nexus S - Android 4.1.2
• Samsung Galaxy S - 4.2.2

On both the Chrome and the default web browser there is a slight delay when scrolling.

The touch event triggers about a second after I touch the screen. This can cause small jumps when flicking up and down and when trying to stop the scrolling (by flicking, and then holding the finger down). The issue does not appear on the HTC Desire HD (Android 2.3.5), unfortunately I do not have any other devices I can test this with.

The issue occurs on all the examples in the FTScroller's readme file.

You can see it in action here:
http://jsfiddle.net/5JtVK/1/

Hi,

you may want to add a new public function: scrollToElement, adapted from _childFocused:

var scrollToElement = function scrollToElement(element, animationDuration) {
    var offset, axis;
    var focusedNodeRect = _getBoundingRect(element);
    var containerRect = _getBoundingRect(_containerNode);
    var edgeMap = { x: 'left', y: 'top' };
    var dimensionMap = { x: 'width', y: 'height' };

    // If an input is currently being tracked, ignore the focus event
    if (_inputIdentifier !== false) {
        return;
    }

    // Get a duration
    var duration = animationDuration || 0;
    if (duration === true) {
        duration = Math.sqrt(Math.abs(_baseScrollPosition[axis] - targetPosition)) * 20;
    }
    for (axis in _scrollableAxes) {
        if (_scrollableAxes.hasOwnProperty(axis)) {

            // Set the target offset to be in the middle of the container, or as close as bounds permit
            offset = -Math.round((focusedNodeRect[dimensionMap[axis]] / 2) - _lastScrollPosition[axis] + focusedNodeRect[edgeMap[axis]] - containerRect[edgeMap[axis]]  - (containerRect[dimensionMap[axis]] / 2));
            offset = Math.min(0, Math.max(_metrics.scrollEnd[axis], offset));

            // Perform the scroll
            _setAxisPosition(axis, offset, duration);
            _baseScrollPosition[axis] = offset;
        }
    }
};

_childFocused can then call this new function.

Sorry for posting an issue what is actually a mere question:

Am I correct in thinking FTScroller would be great to build a carousel on top of?

Horiziontal scrolling would work on touch devices with swiping (with snap-to-grid or whatever it's called enabled, so only 1 element per swipe is moved) while it needs to fallback to clicks on non-touch devices.

Anyone already tackled something like this? If not, I'm willing to take a shot at it and share.

Geert-Jan

For users on a desktop PC I would like to have the scroller advance left/right with the click of a button. I think this carousel effect could be achieved using the scrollTo method but I am unsure exactly how. Please could you give me some pointers?

Dolfin 3.0 / Bada 2.0 on Samsung GT-S8600 (Wave III) and RIM Browser 7.1.0.714 on a Blackberry 9900 don't like the ECMAScript5 setters. So ftscroller.js cannot be parsed. You may want to provide an alternative to ECMAScript5 setters.

Consider a horizontal scroller (scrollingY: false) in a vertically scolllable page. Currently vertical swipe movements on the scroller will not trigger the native page scroll, because of
javascript rawEvent.preventDefault(); in _updateScroll.

For scrollers with scrollingY: false you could try to restrict rawEvent.preventDefault(); to only mainly horizontal swipe movements and correspondingly to mainly vertical swipes for scrollers with scrollingX: false.

Thanks for a great product.

Everybody knows how IE sucks but i still have to pull the question. Do you have any plans to get the scroller to work proper in IE 11?

I thought I'd provide some feedback on the feel of ftscroller. While animating, the experience is quite smooth - better than most examples of scrolling that I see. However, there seems to be a couple of issues.

1. The bounce could stand to be more natural. In most iOS apps, when you hit the bounce wall, there is no noticeable discrete change in velocity, rather the bounce is gracefully absorbed. Also, when pulling to refresh iOS apps don't typically create the type of long delayed rubber banding that I see in ftscroller. I've attempted to change some of the hardcoded cubic bezier parameters for bounce but I can't seem to reproduce a more iOS feel. Have you had any luck in doing so?
2. I've noticed an interesting behavior when accumulating momentum and scrolling. It seems like continued swipes momentarily decrease velocity (while touchmoving). I know this is one of the things that creates a physical feel, but I think that the amount of weight placed on the physical touches while in the middle of scrolling is greater than what I feel in native iOS apps. It's almost like my touchmoves are adding friction to the scrolling physics, yet that friction doesn't increase the velocity of scrolling as much as I expect. Maybe there's something completely different happening but this is the effect that I perceive. Could it be that continued swipes need to be smoothed out more while scrolling? (Or less weight/friction applied to touchmoves while scrolling).

Have you or anyone else found some very nice CubicBezier constants to try?

Scroll works great in browser and on a desktop AIR app I have developed. One issue that I'm curious if you have come across before - mp4 videos don't load when scroll is in place. They just disappear. Conflict in video player and ftscroller?

It would really useful for showing and hiding of arrow indicators for scroller to fire an event when the scroller reaches its either of its ends. (far left / far right).

Not working on opera 12 on linux ubuntu 12.04. Haven't checked on windows, but probably the case too.

    require(["ftscroller"], function() {
            var scroller = new FTScroller($content, {
                        scrollingX: false
            }); 
    });

not sure why it triggered the error..

First of all i would like to say i love the ftscroller, found it way better than other scrollers i have worked with.

I use the ftscroller with pagination with one horizontal scroller and several vertical scrollers within, as i call pages.

I would like to let my users jump between the "pages" (vertical scrollers). How can i link to a specific scroller? Is there a way of achieving this?

Grateful for answer.

Expected:

When a paginated scroller resizes we call scroller.updateDimensions(); and expect the current segment to be maintained.

Actual:

Scroller jumps to next segment when a scroller is scaled down considerably. This in turn (correctly) fires a segmentChange event.

In some browsers, e.g. Firefox Mobile, but also some Android Native browsers, the ftscroller_container is moved after a label element is clicked. In a vertical scroller, the scrollTop property is changed, so that parts of the scroller can no longer be scrolled to.

I tried to work around this problem by adding a new function

/* Click on label element changes scrollTop/scrollLeft in some browsers. */
var _removeScrollEdge = function _removeScrollEdge(event) {
    var axis;
    for (axis in _scrollableAxes) {
        if (_scrollableAxes.hasOwnProperty(axis)) {
            if (axis === 'y') {
                if (_containerNode.scrollTop > 0) {
                    _containerNode.scrollTop = 0;
                }
            } else if (axis === 'x') {
                if (_containerNode.scrollLeft > 0) {
                    _containerNode.scrollLeft = 0;
                }
            }
        }
    }
};

and registering it via

_containerNode._ftscrollerToggle('scroll', _removeScrollEdge, true);

in _toggleEventHandlers.

Not sure if this is a bug, but here's what confusing me:

In the horizontalpaged-strict.html example, a scroller is created and, according to documentation, updateOnChanges is set to true by default.

However, if I manually delete one of the scroller elements (section), the scroller's dimensions are not updated, ie : after the last element ("page 6), I can still scroll one "page" to the right

Is there a way of having the scrollbars visible all the time, and not fade away?

Rubber banding via mouse wheel is inconsistent with expected mouse wheel scroll behaviour.

Could this be turned off, or could the bounce be reduced?

a large container,has a scrollerY,
and the large container has an inner small container,the small has a scrollerY too,
then the small container scroller not work