pbakaus / scroller Goto Github PK
View Code? Open in Web Editor NEWAccelerated panning and zooming for HTML and Canvas
License: MIT License
Accelerated panning and zooming for HTML and Canvas
License: MIT License
The translateZ
“magic bullet” is never gonna work anywhere else than in WebKit.
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.
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
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.
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!
Right now it seems like Zooming has to be manually invoked, is there any plans of adding pinch to zoom on touch screen devices?
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.
If you set bouncing as false, with paging as true. There is no paging. The scroller does not know where to stop.
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?
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.
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.
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?
i can't click on a hyper link element on scroll content if i used scroller to scroll content.
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:
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.
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
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.
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...
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;
}
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);
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.
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.
On Android 2, in a scroller containing 2 inputs, when clicking the first input, I had the following behavior:
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 ){
Is this project still being maintained?
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
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
Github is redirecting from zynga.github.com
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 ?
i want to use it in wechat ,but i don't know ,can you help me?
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
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:
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.
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.
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?
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…
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!
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.
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?
Is there any reason why this is not published on npm?
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.
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
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.
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!
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:
{ scrollingComplete: function(){ console.log('complete'); } }
if (!self.__isDecelerating){ ... }
)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.
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!
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:
__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);
.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.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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.