Develop Reference

CSS touch like scroll using mouse

How can I add mouse scroll option in my angular app similar to what's present for touch screen devices in which you scroll via holding screen alongside some left or right swipe movement. How can I implement similar scroll technique using mouse so that user can click at some empty area than while holding down the click move mouse in a specific direction to scroll respectively.
Similar to what's available for trello.com:
I would prefer to implement this behavior using pure CSS as chrome's inspector tools also provides this feature while testing site's responsiveness for different screen sizes. So if its possible via CSS it would be great.
If it won't be possible via CSS then I would like to implement using JavaScript or TypeScript.

You could use this library: http://hammerjs.github.io/. It covers a large range of gestures you might be interested in.

Zoom effect in mobile application only in required area?

I've a problem in my application. Native browser zoom in mobile devices don't fit my needs...
I've 3 main parts in my mobile web page.
Header
Main content area (there will be scroll inside this if content will increase)
Footer
If i use native zoom of mobile browsers then my whole page gets zoomed..
but i don't wants zoom effect in header and footer..
What i wants is to implement native browser zoom effect only in content area..
So please give me some guideline how it is possible to achieve this without any errors or cross browser issues?

Skrollr iOS issues

I'm having issues with a parallax site I am building using Skrollr.
I've built a site that has the same effect as https://www.spotify.com/uk/. The effect being large full width background images that move slower than the natural browser scroll, and have text and other images moving on top of them.
When viewed on a desktop browser the site functions fine and performs perfectly. The problem I'm having is when testing on an iPad (iOS 6.1.3) and you release your finger from the screen and Skrollr's intertia animation takes over, the large background images and other content on the screen start to jitter and jump on the screen. This does not happen when you still have your finger touching the screen and scroll, only when you let go and the easing takes over.
A couple of things I've tried are:
Setting webkit-backface-visibility:hidden on all of the background images, and skrollr-body div.
Animate elements using –webkit transition: translate3d
If anyone could shed any light on why I'm getting this page flickering issue that would be great.

I had a very similar issue (i.e. Skrollr / iOS parallax background image 'flicker'). I believe you'll find it's related to this: cubiq.org/you-shall-not-flicker
Simple solution (from the article): -webkit-transform:translate3d(0,0,0).

How can I make a parallax scrolling site that works on iOS and desktop?

Before you say this isn't possible, I know it is. Here's an example: http://victoriabeckham.landrover.com/INT
The main problem is that iOS freezes DOM manipulation on scroll, so you have to use some sort of technique to overcome the problem. The parallax plugin I was hoping to use is stellar.js, but the issue I am running into is that the "iOS demo" for that plugin isn't really usable on a desktop. I fiddled with it for 3 hours this morning, and couldn't get a setup that works correctly on both iOS and desktop.
I need some ideas, either a technique to configure stellar.js to work the same way on both (I'm not sure if that's possible), or another library that works on both, or maybe some insight on how I could program a workaround myself.
Any help is appreciated.

Step 1: Create and object like this
{
startFrameNumber: {
//first obj
id: idOfElement
duration: howeverManyFrames
startLeft: whatever
endLeft: whatever
startTop: stillWhatever
endTop: whateverAgain
},
nextStartFrameNumber: {
}
}
Step 2: Make the page unscrollable via CSS, ie 100% height and width with and overflow: hidden
Step 3: When the user scrolls (via custom scrollbar, keyboard action, or touch events) advance the animation x frames based on how far they scrolled or whatever. If your animation object you created has a key [frame] then add that to the queue of things that are visible and moving, and move all those things in the queue to their appropriate places and/or remove them from the queue of active objects
That's it. The function for moving things around should be pretty straight forward, except getting the animations smooth will take a little playing around with.

Simply scroll each layer of parallax effect manually and control them yourself without relying on browser's page scrolling.

I've successfully implemented cross device/browser parallax scrolling with the help of the Zynga Scroller js library.
It takes care of one of your main concerns which is the interoperability of click and touch events and scrolling on mobile webkit devices – this allows you to manipulate the DOM as you scroll.
Then, to create the parallax effect you have three options:
Simulating a real-world 3d parallax by using 3d transforms (with a parent/wrapper element that controls perspective and transform origin).
Using a 2d parallax library such as stellar.js or skrollr
Building your own parallax scrolling algorithm.
Here's a quick demo (using existing sample code) of option 1 showing how smooth parallax scrolling would work across desktop and mobile devices. Of course, you're limited to devices that have support for 3d transforms. Note that the Zynga Scroller works via click/touch and drag – it should probably not be used as a dekstop solution as the only thing that would be required is overflow: scroll in CSS.

Have a look at the jQuery-Plugin "Scroll Path" http://joelb.me/scrollpath and combine this with different layers and speeds. You will have recognized that the scrolling of the example page is not just a vertical parallax stage but also moves layers horizontally while you scroll up and down. This is possible with Scroll Path.

Try using http://cubiq.org/iscroll-4 and stellar.js together.

Do your parallax stuff for desktop normally and then add a 'touchmove' Event Listener to fire the scroll event:
document.body.addEventListener('touchmove', function(){$window.scroll()}, true);
Tested and working on iPad 2 with iOs 5.1.1

Mobile Site Prevent Elastic Page Scrolling

I have developed an ajax site that has a fixed header and footer and a scrollable div in the middle that contains the content of the application. The site works great on mobile devices as well (iPad, Android, etc) except for the fact that when the user gets to the bottom of the middle scrollable div, the elastic scroll comes into play and the bottom of the page pulls away from the bottom of the screen. Same when they reach to top of the scrollable div.
I know you can completely prevent elastic scrolling by doing the following:
$('#Platform').bind('touchmove', function (e) {
e.preventDefault();
});
But this obviously prevents any scrolling at all and then the user can't see the content of the application. My thought is to put some conditional logic in the above event to make it so that e.preventDefault() is called only when the user is at the top of the div AND they are trying to scroll up or they are at the bottom of the div AND they are trying to scroll down. I started doing something like this:
$('#Platform').bind('touchmove', function (e) {
var platform = $('#Platform');
if ((platform.scrollTop() + platform.innerHeight()) >= platform[0].scrollHeight) {
e.preventDefault();
}
});
The above code basically determines if they are at the bottom of the scrollable div and if they are, e.preventDefault() is called. This is great but once they hit the bottom of the div, they will never be able to scroll again! I figure that I have to somehow determine which way the user is swiping and include that in my logic. If they are at the bottom and are swiping down, don't scroll. But if they are at the bottom and swiping up, allow them to scroll. And visa versa for when they are at the top of the div.
Is this the best way to go about accomplishing my goal? Is there a better way? If this is what I should do, how does one determine the direction of the swipe?
Also, is there an easier way to test a website on an iPad, iPhone, Android device than having to deploy it to a development server? I would have played around with my proposed solution more except for the fact that I didn't have anyway of easily debugging my code.
Thanks.

http://cubiq.org/iscroll-4 fits great for your usage.
You can easily debug your programs if you have a Mac, then you just use the iPhone/iPad simulator that you get when downloading xCode / iPhone SDK.