Develop Reference

More accurate scrolling

See this page:
http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/scrollbar_themes_demo.html
Try and scroll to 10,20 or 30% position using the mouse-wheel. It is not possible. It seems to jump to 33%, 66% and 100% as if they are anchors. That makes sense on a large page if you want to scroll quickly through the page.
But the page I am using it for I need more control, I need it to be able to easily scroll to specific points. Is that possible to do that where I can use the mousewheel to scroll more specifically to say 8,22,47%. Of course, it might not be possible to scroll to those exact points but it should be easy enough to scroll and slightly adjust with the mouse-wheel to get to that point you want.
Is that basically what smooth scroll is and if so do I just turn it off or do i need a jquery script to able to do this on my website or can you adjust your current script to change the anchors so instead of jumping 10% it only jumps 2% which would likely give more control.
On this particular page there wouldn't be a ton of scrolling needed but you do want to be able to stop it at specific points otherwise one tile is half cut off and then you have to use your mouse on the scrollbar to move it to a specific point where its not cut off.

I did not really know what was the best solution at the time but the problem was that I had a view like Trello with cards and when I used the mouse scroll often it would stop with half the card cut off, the only way to see the full card was to stop the mouse wheel scroll and manual use the scrollbar to pull it to an exact position.
As it turns out there was a perfect solution. http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html
See the last solution, snap scrolling to images, I used that but snapped to the top of the card so for each mouse scroll it moves to show a new card which is the perfect solution for me and hopefully will solve other users with similar layouts.
The initial link I posted did not have this solution even though it was the same code repo, I stumbled across the solution later but I accept I probably did not explain my question very well initially

Issue scrolling with scroll bar in Superscrollorama

I'm working on a very animated website that extensively uses the pin function of superscrollorama to pause scrolling while still animating certain elements based on scroll position.
The issue is one of stability and optimization. The client, of course, wants the site the be super stable and glitch free, even when grabbing the scroll bar with the mouse and jerking it up and down. Fortunately, this is the only way to get the problems to rear their ugly head, but ugly they are.
When jerking the page up and down with the scroll bar, certain elements are "lost" or "misplaced". I suspect that their positioning is not being reset appropriately. When pinned elements are unpinned, the screen goes white until the next section is pinned. You can see this especially when jerking the page up and down, stopping at the top of the page. Try scrolling down from there. Even some animations are only partially rendered in the scene after the initial office scene. I've tried resetting each affected img and divs position to absolute on unpin to no avail. I've also forced an initial fixed position on each affect img and div and still had issues.
Could it be that the is just too much going on and the browser/computer cannot render it all quick enough, dropping the unexecuted JavaScript and leaving the animation only partially completed?
I am new to the world of web development, especially front end stuff. Any help is really appreciated.
EDIT: I ended up scrapping all of the Superscrollorama code and used Skrollr instead. None of the glitchy stuff happens now + using Skrollr made it easier to make the site responsive. Even works to a certain degree on mobile/tablet.
URL: TalentVisor

How did they do those effects in http://artofflightmovie.com/?

I have been trying to understand how they did those effects in http://artofflightmovie.com/ with no success so far. I am not even sure what to google for for help. Could any one ellaborate on it and perhaps put links to plugins\tutorials\other websites doing the same thing?
There is already a similar question, but it didn't help me a bit ^^
Custom scroll bar behavior in Javascript?

All of the answers here so far are spot on and cover various pieces of the execution. Joseph's post about how we 'contained' and 'maneuvered' the site are dead-on, and those mentioning jQuery accurately depict our heavy reliance on it :)
With that said, the other concept of moving along a non-linear path was probably the most difficult part. We literally used an Illustrator file that was setup like a piece of graph paper and drew a bezier path that reflected the movement we wanted from the scrollbar. Then we 'downsampled' the path by converting the curved lines into a bunch of straight lines that represented the curve (similar to downsampling audio waveforms) to keep performance/speed high. We took those coordinates, gave them to our designer, and he created a gigantic design file and literally designed each content section at the designated 'stop' points. Next we mapped each coordinate along the path to a percentage value of the scroll position. We stored these values in a JavaScript array. Lastly we wrote some JS functions that we pipe the scroll position through to determine how to offset the positioning of the site 'container'. (It basically 'tweens' between each coordinate allowing us very fine/precise values at any given scroll percentage) The scroll functionality is handled by a tall div that basically sets our document height to force a scrollbar, and we just read it's position during a Scroll Event and slide the container around to where it should be using the above mentioned functions.
The parallax effect is achieved by applying a percentage of the position offset (what we use to move the container around) and applying it to the sub-containers of the various content sections. This makes the subcontainers move slower or faster than the background, but on the same motion path.
Lastly, the little snowboarders and helicopters (which have CSS3 rotations in addition to x,y movement in some browsers!) are positioned by using a simliar array of 'start' and 'end' positions and tweening between them based on the scroll percentage.
I'll leave it at that to keep this from turning into a book, but I'd be happy to elaborate on specifics if you're interested.
Full disclosure: I was lead developer on the site. I'm not posting to 'toot my own horn' or anything like that, just to be helpful and provide assistance to a fellow tinkerer. I come here a lot to dig through and get insight from others. (many, many thanks to those who have helped us!) Also, shameless plug, but the film is breath-taking... go rent it if you haven't yet, you won't be sorry. :)

That's a pretty cool website ;)
Basically using some javascript you can detect how far a person has scrolled. Considering the amount of scrolling you can move the contents of your webpage around if their position is absolute.
There are a couple of jQuery plugins that allow you to do simular stuff although I'm not sure you can "scroll through" a sequence of coordinates.
Here are a couple of jQuery plugins that helps you get simular effects:
http://johnpolacek.github.com/scrolldeck.js/
http://johnpolacek.github.com/scrollorama/
http://demos.flesler.com/jquery/scrollTo
http://webdev.stephband.info/parallax.html
I just picked a couple I'm familiar with but there are many plugins that are alike.
edit:
Decided to add some more simular websites for your pleasure.
http://www.activatedrinks.com
http://www.beetle.de
http://www.nikebetterworld.com

the whole page is an "overlay" - a full width and height wrapper <div>. sort of how modal windows do their "full page shadow" effect and have a small div float inside. the whole page content is in that wrapper. the scroll path is a script. the script captures the body scroll and moves the contents of the div accordingly to the positions provided by the script. with a body long enough to be scrollable (which cannot be seen since the wrapper covers the whole page), it's as if you are scrolling sideways, upwards etc.
an analogy is a modal window. the wrapper is the full-page shade. the modal window is the content. and notice how modal windows stick to the middle? that's using a script to calculate it's position to stay in the middle by moving the modal window down, relative to the page's top. but in that website's case, they move in different directions.

It doesn't seem too complicated.
Using the .scroll(function() {}) in jQuery you listen for a scroll event. When triggered you set the position style (left, top) of the content div to give the appearance of moving sideways instead of down.
I guess you'll need overflow:none property on the div to prevent users from scrolling over the area you don't want them to see.
Sounds like a lot of effort for a clunky user interface in my opinion.

When to fetch more content on infinite scroll?

I'm building out an infinite scrolling feature for my site and am debating at what scroll point to inject more content into the page. I've seen some that perform the request at a fixed pixel distance from the bottom of the document, and others that feel more percentage based. What do large sites like Tumblr, Facebook, Pinterest, etc. do? Are there different use cases between fixed pixel distance and percentage? Here's my code:
// 20%
var scrollPoint = ($(document).height()/5);
if($(window).scrollTop() >= $(document).height() - $(window).height() - scrollPoint) {
console.log('Load more goodness');
}
Edit: On re-examining Facebook, it almost looks like they have a 'hot zone' where they pull in more content. If you use the mouse to scroll to the bottom you don't get an auto fetch of content.

I would imagine a fixed pixel distance is a great idea, since as you add more content, the 20% mark would probably include more and more information. Depending on your content, I think it could even end up in a feedback loop.

Since the "tick" of the mouse's scroll wheel is independent upon window size, I think that the triggering distance should also be static.
I don't really know what to say. Does it make a difference? As long as the user doesn't hit the bottom of the page, I don't think it matters.

Why not use an existing JQuery plugin like this one rather than writing it yourself?
http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/

Scroll bar algorithm

I've been trying to create my own custom scroll bar implementation in JavaScript. It must emulate the look and behavior of MS Office 2007 I checked many solutions out there, but nothing satisfies my needs. My main problem is this: How to calculate a balance between the scroll bar height and the number of lines it will move the target page when itself dragged a pixel? In other words, a balance between the scroll bar precision and the space available to drag it up and down. Is there a ready algorithm for that to reuse? I searched the net but found nothing, quite strange for what must be a common coding problem?
Thanks!

this is how to calculate the top position of your scrollbar
scrollbar.style.top = element.scrollTop / (element.scrollHeight / element.style.height)
you can use this onscroll of your scroll element. vice versa, this works in the other direction, when you drag your scrollbar.
sorry for this quick'n'dirty answer, will provide more information later if you liked to.