pbakaus/scroller

Accelerated panning and zooming for HTML and Canvas

scroller's Issues

[Req] Scrollbar support

Hi, I'm trying to display scrollbars but there seems to be a problem with the way translate/margin works. The scrollbar will shrink and grow, but never change its position.

It's easy to see in the EasyScroller demo (http://zynga.github.com/scroller/demo/easyscroller.html) by setting overflow:scroll in the #container element.

I tried to use a Jquery-UI slider by updating its position on the "render" function, but I could not get the smooth animation to work (acceleration/deceleration).

So, I would like to suggest inclusion of (auto-hidden) scrollbars. I think it's a good idea specially for long texts, where you want to know how long it is and how you're progressing towards finishing it. In my case, it's useful because I'm using a 10-20x the screen size horizontal/vertical content.

Links don't work on touch screens in Chrome (with enabled touch-events)

Hi!

I've noticed that click events ain't triggered at all in Chrome (version 29). As result any links in the area with scroller enabled don't work on touch screens.

Steps to reproduce:

1. On a computer with touch screen...
2. Open EasyScroller example: http://zynga.github.io/scroller/demo/easyscroller.html
3. Using Chrome Dev Tools edit a piece of text, adding A-link somewhere.
4. Now try to click on the link, it won't open.

Workaround is to DISABLE touch events in Chrome. Visit internal URL chrome://flags/, and set variable "Enable touch events Mac, Windows, Linux, Chrome OS" from Automatic (default) to DIsabled.

The other problem with emulating touch events using mouse (that's what we get after disabling touch events in Chrome or if using Firefox which doesn't support touch events or has this disabled by default - idk) is that click events occur even if you just scroll the content. I.e. if you start scrolling from touching a link and simply release your finger/mouse touch, then after animation finishes, browser opens the link! Touch-emulation part of the library should disable such clicks.

how can i use in wechat?

i want to use it in wechat ,but i don't know ,can you help me?

[enhancement] Add missing bower.json.

Hey, maintainer(s) of zynga/scroller!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library zynga/scroller is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "zynga/scroller",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

IE8+ Compatibility

Hello,

I know this project is more dedicated to mobile/tablet devices but I found it handy for a mini board game project that I'm developing.

I started customizing the ui.js replacing all the addEventListener by jquery equivalent to remove all the warning but now I'm stuck. The scrolling doesn't work and IE doesn't throw any error message.

I don't know if anybody already tried it but if anyone have any clues I'll be glad to try to test it.

Thanks

Mathieu

Paging: Remove double drag stuttering

When paging is activated, and you drag from one page to another and then drag again while the deceleration of the first page change isn't completed, Scroller immediately "jumps" to the next page before taking the next drag.

The native paging controls Apple do not work this way, so it probably makes sense to consider this a bug.

pass scrollY event back to body?

I have a Scrollable that is taller than the viewport of the monitor/device. To be specific, the scrollable container width is 100% of the screen, but the height is equal to the contents of the scrollable (let's say "2000px"), and I have scrollingY disabled.

On desktop, when a user drags the browser window's vertical scrollbar, or spins the mouse wheel, the entire document is scrolled in the window.

On touch devices, dragging vertically does nothing.

Is there any way to allow vertical drags that happen inside the scrollable defer "naturally" to the document?

http://www.pbs.org/kenburns/explore/timeline

Add bouncing bouncing: false, will be hidden at the bottom part of the dom, when set to true will not appear this kind of problem

How to force stop scrolling manually?

Publish on npm?

Is there any reason why this is not published on npm?

Pull down to Refresh works, But Scrolling down the list resets back to top

Hi there,
I am developing an android app for my website using html5 and getting posts from our wordpress site through json. Following is the link of the app site
http://bit.ly/1fbr8jP

On Page load posts will loaded through ajax, If you try the scrolling on the posts, pull down to refresh works perfectly, But Scrolling the opposite direction, that is scrolling down to other posts, resets scroll to top after mouse up or touch end. I dont understand where I am missing, Can anyone please help me know what is the issue?

Thanks!

Pradeep.S

Remove `translateZ` hack for non-WebKit browsers

The translateZ “magic bullet” is never gonna work anywhere else than in WebKit.

Via http://twitter.com/louis_remi/status/139635486548430849

Raf.js doesn't work in older Browsers

It seems that the requestAnimationFrame-implementation provided in Raf.js does not work in older Browsers (tested in FF3.6 and IE8). Although those Browsers are not exactly the target audience it should be noted that the Scroller works like a charm when the Raf.js is replaced by the requestAnimationFrame-polyfill written by Erik Möller.

For now, I did not have the time to investigate the root-cause of the problem but maybe someone else has a clue…

make duration of the animation customizable

The duration of the animation that is used as a transition if you call scrollTo or scrollBy is hard set to 250ms, were it really should be customizable.

Any plan to make this into a jquery plugin ?

At this stage, this looks a bit too "low-level" to be easily integrated, especially when trying to have several scrollers on the same page.

Are there any plans to make this into a jquery plugin, or at least to simplify the API ?

Paging does not work correctly with bouncing false

If you set bouncing as false, with paging as true. There is no paging. The scroller does not know where to stop.

Usage with react?

Is there a recommended way to use this package in a react app?
I've tried linking the dependencies within the public folder directly and importing them in the react root js file, and in both cases, I get errors.

how to pinch to zoom force on the center

hello. i have the problem that i could not force on the center when i doing zooming. it forces on the bottom of the elem. this is my code.

defaultProps.forEach((val, i) => {
const paris = new ZScroller(this[scroller${i}], {
zooming: true,
minZoom: 1,
onScroll: () => {
const values = paris.scroller.getValues()
zoom = values.zoom
},
})
console.log(paris)
})

are there any params i missed?
thanks

Expose closed form destinations as they are discovered.

In addition to exposing an rAF throttled physics value callback, it would be extremely helpful to also include as much information as can be determined about the future values. This would look like:

• As your finger is released, the easing function, final destination and length of animation that will be started.
• Of course, if a touch or interaction occurs before the final time of animation being complete, that prior plan is invalidated - but applications can trivially handle that case.

The reason why this is important, is that we can compute CSS transition functions and keyframes (not just transforms) that execute very performantly - quite possibly the only way to move things on screen while being resilient to image decoding.

Please let me know if anyone has thought of a way to do this easily.

Android 4 WebView scrolling over text breaks when file-size of HTML is too big (Cross Reference to Android tracker)

We have posted a bug to the Android 4 tracker ...
https://code.google.com/p/android/issues/detail?id=55922&thanks=55922&ts=1369687024

Scrolling will not work within the scrolling area and text will select if the size of the html file exceeds about 200kB on Android 4 devices.
When inspecting the touch events we observed that e.g. 'touchstart' are not passed at all to Javascript (if file is big enough!!), but only if the touch occurs on top of normal text. If the text (e.g. HTML P element) is inside a button element, the touchstart-event goes through again.

It might be of relevance to this project.
Thanks for providing zygna scroller.

about canvas rotation and use scroller Dimensions wrong

When using the createjs framework, with the scroller to do scrolling, rotating the canvas angle, will cause the value of the maximum distance to set the scroll is wrong, there will be differences in the PC and the mobile terminal, there are differences in different mobile phones, Android IOS has a problem, specifically If CANVAS is scaled, how do you calculate the scrolling area?

// canvas.width = stageWidth; // canvas.height = stageHeight; // if (stageWidth < stageHeight) { // if(scrollDirection !== "top"){ // sceneV(); // }

    //     stageScale = stageWidth / 640;
    //     container.rotation = 90;
    //     container.x = 640 * stageScale;
    //     container.y = 0; //stageHeight / 2 - 1138 * stageScale / 2; //居中一下
    //     container.scaleX = stageScale;
    //     container.scaleY = stageScale;

    // } else {
    //     if(scrollDirection !== "left"){
    //         sceneH();
    //     }
    //     stageScale = stageHeight / 640;
    //     container.rotation = 0;
    //     container.x = 0;
    //     container.y = (stageHeight / 2 - (640 / 2) * stageScale) / 1; //居中一下//0;
    //     container.scaleX = stageScale;
    //     container.scaleY = stageScale;
    // }


  //scroller.setDimensions(app.view.width, app.view.height, app.view.height, contentLength);

ScrollBy/ScrollTo is cancelled during animation

When I call scroller.ScrollBy(..) during manual scrolling animation, it just doesn't work. So I have to wait until animation finishes and call ScrollBy one more time.

Is there a way to stop animation?

Update demo URLs to zynga.github.io

Github is redirecting from zynga.github.com

zooming bug with iframes

When a scroller contains an iframe like an embeded youtube clip, applying zoom is buggy: iframe content does not seem to be zoomed but transformation origin top left seems to be applied

Canvas demo not working on IE9 - 10

I know it's not scroller related bug, but still it could be nice if all demos will be working on diffrent browsers.

There's problem with rendering tiles after scrolling, only first row is rendered properly.

how to pull down to refresh the dom

update gh-pages

context

dom zoom in blurs the page

The zoom in demonstrated on the DOM demo page http://zynga.github.com/scroller/demo/dom.html looks not very well. As a comparison, zoomooz (http://janne.aukia.com/zoomooz/) zoom in looks crystal clear.

hyper link not working on scroll content

i can't click on a hyper link element on scroll content if i used scroller to scroll content.

Adding divs manually not lining up

Hello,

I am working on a mobile project and came across this plugin. Good work. Looks straight forward enough.

Upon playing with the demos (namely the dom-paging-x.html demo) I came across this code:

var size = 400;
var frag = document.createDocumentFragment();
for (var cell=0, cl=content.clientWidth/size; cell<cl; cell++) {
    elem = document.createElement("div");
    elem.className = "cell";
    elem.style.backgroundColor = cell%2 > 0 ? "#ddd" : "";
    elem.innerHTML = cell;
    frag.appendChild(elem);
}
content.appendChild(frag);

Which is easy enough to understand on how it generates the divs for the content. When deleting this loop and adding your own divs into the content div with the same class name, the scrolling effect from page to page will be off.

For instance, if I were to add 4 divs with the class name of cell with a width of 400 and the content div width is at 1600, scrolling from cell to cell shows a bit of margin to the left after the second div and on. It doesn't add up exactly right except if it's generated with the above code that was in the demo.

I am curious to what's going on here. The class used in the CSS is exactly the same and the for loop is not adding anything different to the divs. What's going on here?

Use mousewheel to scroll

Hello,

I might be missing something here but is it possible to use the mousewheel event to control the scrolling rather than the zooming?

I've read through the documentation a few times but I can't seem to find this mentioned anywhere.

Many thanks in advance for your help.

Plans to implement Pinch to Zoom?

Right now it seems like Zooming has to be manually invoked, is there any plans of adding pinch to zoom on touch screen devices?

Side effects while focusing input on Android 2 due to 3D transforms being used.

On Android 2, in a scroller containing 2 inputs, when clicking the first input, I had the following behavior:

• the second input get the default focus ring (orange outline)
• when typing, the input updated is the first.

After some tests, I found out that in the 'EasyScroller.prototype.render' function, the translate3d part was used although not being supported in Android < 3.

Testing for the perspective property does not seem to be reliable enough.

As I'm using Modernizr, I end up replacing:

if (helperElem.style[perspectiveProperty] !== undef) {

by

if ( Modernizr.csstransforms3d ){

target.tagName undefined

On iOS 4.3, EasyScroller wasn't working for me because touchstart wasn't getting fired when touching to drag on plain text. The failing code was the bit that checks if the element is a form element or not.

Option to Center Content to Client when the Content is smaller then the Client

This option would allow the content to be centered in the client space instead of anchored to the left top. If the user resizes the browser window or has zoom enabled and zooms out it will snap move to the center.

add the option

this.options = {
 /** Enable content to center in client when zooming out */
centering: false,
};

add internal fields variables for offset values

/* {Number} Offset to center left position */
        __leftOffset: 0,

        /* {Number} Offset to center top position */
        __topOffset: 0,

add logic to calculator left and top offset based on size. I put this in _computerScrollMax function

            var xoffset = 0;
            var yoffset = 0;

            if(self.options.centering){

                if (self.__clientWidth>(self.__contentWidth*self.__zoomLevel)){
                    xoffset = (self.__clientWidth-(self.__contentWidth*self.__zoomLevel))/2;
                }else{
                    xoffset = 0;
                }

                if (self.__clientHeight>(self.__contentHeight*self.__zoomLevel)){
                    yoffset = (self.__clientHeight-(self.__contentHeight*self.__zoomLevel))/2;
                }else{
                    yoffset = 0;
                }
            }

            self.__leftOffset = xoffset;
            self.__topOffset = yoffset;

add code to subtract the offset from the left and top when publishing. There are two callbacks in the __publish function

// Push values out
                        if (self.__callback) {
                            self.__callback(self.__scrollLeft - self.__leftOffset , self.__scrollTop - self.__topOffset , self.__zoomLevel); // greg minus out here
                        }

// Push values out
                if (self.__callback) {
                    self.__callback(left - self.__leftOffset, top - self.__topOffset, zoom);
                }

If This worked perfectly right I'd love to make a pull request but there is an issue with pinch to zoom. I guess since the offset is always being applied to left and top when performing a pinch it slides the content under you. I tired to fix this by then subtracting the offsets from where the touch code is done but it's still not perfect. Any suggestions or a different approach would be much appreciated.

I can post my code somewhere if anyone is interested in solving this.

scrollTo behaves differently on second call to `scrollTo` with the same zoom

If you call scrollTo like
scrollTo(100, 100, false, 0.5) and the current zoom level isn't 0.5, the left and right get scaled to 50, 50.
If you call it again, scrollTo skips the scaling phase, send the scrolling twice as far.

The scaling code is at https://github.com/pbakaus/scroller/blob/master/src/Scroller.js#L546. I know the zoom parameter isn't documented, but seems to otherwise work correctly.

This particular issue seems to be fixed if you just add a third case to that iff

			// Correct coordinates based on new zoom level
			if (zoom != null && zoom !== self.__zoomLevel) {

				if (!self.options.zooming) {
					throw new Error("Zooming is not enabled!");
				}

				left *= zoom;
				top *= zoom;

				// Recompute maximum values while temporary tweaking maximum scroll ranges
				self.__computeScrollMax(zoom);

			} else if (typeof zoom !== 'undefined') {
				left *= zoom;
				top *= zoom;

			} else {
				// Keep zoom when not defined
				zoom = self.__zoomLevel;
			}

Demos not working in Firefox

The scrolling/panning demos seem not to be working correctly in Firefox for Mac OS X. Neither DOM nor Canvas detects scrollwheel zoom, and canvas does not render the tiles at all. I have seen this issue in Firefox 14.0.1 on OS X 10.8 and Firefox 13.0.0 on OS X 10.6.8. Are these known issues?

__computeScrollMax computes wrong values

Hi there.
I've been using the Scroller for my last university project and it's really great!
But there's an error in logic that __computeScrollMax uses to compute the __maxScroll values.

As it is at the moment, the values computed are too large when zooming in on canvas elemenets:

self.__maxScrollLeft = Math.max((self.__contentWidth * zoomLevel) - self.__clientWidth, 0);
self.__maxScrollTop = Math.max((self.__contentHeight * zoomLevel) - self.__clientHeight, 0);

I've corrected the problem here:

self.__maxScrollLeft = Math.max(self.__contentWidth - (self.__clientWidth * (1/zoomLevel)), 0);
self.__maxScrollTop = Math.max(self.__contentHeight - (self.__clientHeight * (1/zoomLevel)), 0);

Cheers!

container dimensions ?

hey there,
really nice project...!

i would like to have just a really thin container of maybe 50px on the right of the html that reacts to the touch-input.

i already searched within the .js to set the dimensions of the container manually, but could not yet find the right value for this.

i am totaly grateful for every suggestion to implement this.
THANKS!
S.

clientHeight is 0 in backbone webapp

Hi guys!

Thanks for amazing script! I just have problem with executing your javascript before backbone render function. So I have always clientHeight 0. How can I resolve this problem? Do I neeed load your script after backbone render function? How can I reflow EasyScroller from outside of the script ?

Thank you for any opinion!

Pinch to zoom not cross-browser

Scroller's touch event API wants a "scale" property:

doTouchMove(touches, timeStamp, scale)

In the examples, this "scale" property is picked directly from the event (e.scale).

However, it seems that this is a webkit-specific property -- it doesn't exist in the current versions of mobile Chrome.

My workaround has been a third-party library (https://github.com/EightMedia/hammer.js), but it'd be nice if Scroller handled this on its own...

Using paging, getting the current targeted page on scroll end

I think it would be very helpful to be able to return the current object in the NOOP callback when the page settles. Scrolling to object and finished scrolling to object would allow a lot of features and I was wondering if anyone had a way of keeping track of this targeted object, or whether anyone else was interested in that functionality.

Project no longer maintained?

Is this project still being maintained?

Random Problems

I've just been going through the Scroller class and Animate module to convert to UMD with Mocha testing, and I think that I've discovered a couple problems:

• Scroller's __computeScrollMax assumes a viewport width provided by client width. In my code, I've adopted this.__maxScrollLeft = Math.max((this.__contentWidth - this.__clientWidth)*zoomLevel, 0); instead of this.__maxScrollLeft = Math.max((this.__contentWidth*zoomLevel) - this.__clientWidth, 0);.
• I was unable to rationalize Scroller's zoomTo behavior. This test smells funny to me. I feel that the zoom origin should remain stationary. My implementation is here with the corresponding math.

Integrate scroller with Vue

vuescroll

'scrollingComplete' callback doesn't trigger reliably

Hi guys,

I am using the latest version of Zynga Scroller with the new 'scrollingComplete' callback, which is really useful for locking/unlocking f.e. animations to preserve performance (mostly on android devices). Unfortunately, I've noticed that the event doesn't always trigger. After doing some research on this topic I've found that the following code fails (#990):

if (self.__interruptedAnimation || self.__isDragging) {
    self.options.scrollingComplete();
}

Both self.__interruptedAnimation and self.__isDragging are set to false when bug occurs, consequently the self.options.scrollingComplete doesn't get called.

Steps to reproduce:

1. setup a scroller with the following option: { scrollingComplete: function(){ console.log('complete'); } }
2. scroll a small amount of content
3. wait a little before releasing when scrolled (so that no decelaration gets applied and the code runs into if (!self.__isDecelerating){ ... })
4. the log shouldn't output the 'complete'

You may have to try several times, the bug doesn't always reveal.
This was tested on an iPhone 4S running iOS 6.1.3 in mobile safari.

Zynga Scroller for Phaser

Hi guys,
Would you like to implement this feature in Phaser? It would be great!
This is my example: http://codepen.io/jdnichollsc/pen/Xbqrzd

But it would be great with Smooth effect... but I do not hahaha

would also be great to add this functionality but for individual sprites... I think using bitmapdata object => http://phaser.io/docs/Phaser.BitmapData.html/Phaser.BitmapData.html

Regards for all, Nicholls

Any plans for firefox support (better)?

The Canvas demo does not show any contents and the DOM example does not work (because firefox does not recognize css zoom, needs to use CSS3 transform instead)

I don't see these issues mentioned anywhere.

Thanks

BTW, using firefox 9.01

Update README.md with doTouchEnd() API change

Commit 37100a6 removed the unused values from the doTouchEnd(...) method.

The docs should be updated to reflect this. Using the old signature with the new code throws the "Invalid timestamp value" error.

Thanks!

Update contentHeight after dynamic content change?

Is it possible to reinitialize the scroller? I'm using EasyScroller.js and it's so smooth, but when my content dynamically changes, the height doesn't update